清华 大 学 出 版 社 


3 
州 
蚂 


张 


二 
a 
区 
医 
由 
六 
二 
次 
医 


高 等 院 校 信息 技术 规划 教材 


网 站 开发 与 网 页 设计 


张 明 主编 
恰 朝 成 ” 郭 小 着 ” 却 伯 荣 振 建 试 ”编著 


清华 大 学 出 版 社 
北京 


内 容 简 介 


本 书 系 统 地 介绍 了 网 站 开发 与 网 页 设计 的 知识 与 技术 ,以 一 个 完整 实例 “北京 奥运 吉祥 物 一 一 福 
娃 ? 网 站 的 开发 贯穿 全 书 , 每 章 中 还 设计 了 大 量 的 小 实例 来 辅助 完成 章节 内 容 的 讲解 。 本 书 每 章 均 配 
有 习题 . 实 训 和 习题 参考 答案 ,有 利于 读者 巩固 所 学 知识 和 进行 实 训 。 为 了 方便 课堂 教学 ,本 书 配 有 电 
子 教案 和 书 中 所 有 实例 及 相关 的 素材 。 

全 书 共 四 篇 :基础 知识 篇 .静态 设计 篇 .动态 设计 篇 和 提高 篇 。 全 书 共 12 章 , 主 要 内 容 包 括 网 站 概 
述 、 网 站 开发 环境 的 搭建 、 超 文本 标记 语言 HTML、“ 北 京 奥运 吉祥 物 一 一 福娃 ”网 站 的 静态 设计 、CSS 
美化 .Photoshop 美化 ,动态 网 站 技术 概述 .ASP 基础 知识 、 数 据 库 访问 技术 “北京 奥运 吉祥 物 一 一 福 
娃 ? 网 站 的 动态 设计 、 网 页 特效 设计 和 Web 新 技术 展望 。 

本 书 内 容 丰 富 ,结构 清晰 ,语言 精练 通俗 易 懂 、 具 有 很 强 的 操作 性 和 实用 性 ,可 作为 高 等 院 校 “ 网 站 
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随 着 网 络 技术 的 飞速 发 展 ,Internet 及 其 应 用 不 断 渗透 到 人 们 
的 生活 中 。 网 站 是 Internet 的 重要 组 成 部 分 ,政府 机 关 可 以 利用 网 
站 宣传 政策 法 规 、 发 布 信息 和 进行 网 络 办 公 ; 公 司 和 企业 可 以 利用 
网 站 展示 企业 形象 、 宣 传 企业 文化 、 推 介 企 业 产 品 并 且 进 行 电子 商 
务 活动 ;个 人 也 可 以 利用 网 站 展示 个 性 风采 、 学 习 交 流 和 共享 资源 。 
因此 ,网 站 开发 与 网 页 设计 也 成 为 Internet 时 代 迪 切 需要 掌握 的 技 
玉 这 一。 

本 书 是 编者 在 多 年 网 站 开发 与 网 页 设计 方面 授课 .实际 项 目 开 
发 的 经 验 基础 上 所 编写 的 一 本 教材 ,具有 如 下 特点 。 

1. 内 容 全 面 , 结 构 合理 

全 书 分 为 基础 知识 篇 .静态 设计 篇 .动态 设计 篇 和 提高 篇 ,从 浅 
到 深 、 由 易 到 难 ,结构 合理 ,内 容 全 面 。 另 外 ,每 一 篇 内 容 又 相对 独 
立 , 读 者 可 以 根据 实际 情况 选取 相应 篇 章 进 行 学 习 。 本 书 的 内 容 丰 
富 而 全 面 ,主要 包括 网 站 概述 、 网 站 开发 环境 的 搭建 、 超 文本 标记 语 
言 HTML、“ 北 京 奥运 吉祥 物 福娃 ”网 站 的 静态 设计 、CSS 美化 、 
Photoshop 美化 \ 动 态 网 站 技术 概述 、ASP 基础 知识 、 数 据 库 访问 技 
术 “ 北 京 奥运 吉祥 物 福娃 ”网 站 的 动态 设计 、 网 页 特效 设计 和 
Web 新 技术 展望 。 

2. 一 个 完整 实例 贯穿 全 书 

全 书 以 一 个 实例 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 开发 为 主 
线 , 从 前 期 规划 到 后 期 设计 和 测试 .从 简单 到 复杂 、 从 静态 设计 到 动 
态 设计 、 从 功能 设计 到 美化 设计 、 从 无 特效 设计 到 有 特效 设计 等 逐 
步 进 阶 ,逐步 美化 和 功能 逐步 完善 。 各 个 部 分 既 自 成 体系 又 互相 连 
贯 ,能 够 帮助 读者 真正 达到 学 以 致 用 。 

3. 注重 实践 

本 书 由 多 年 教授 网 站 建设 课程 的 教师 和 进行 实际 网 站 项 目 开 
发 的 团队 共同 编写 ,本 书 的 最 大 特点 是 注重 实践 ,在 实例 的 制作 过 
程 中 提出 相关 理论 ,应 用 理论 和 总 结 理论 ,克服 了 其 他 类 似 教材 的 
理论 和 实际 应 用 不 能 很 好 结合 的 问题 。 
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本 书 内 容 丰富 、 结 构 清晰 ,语言 精练 \ 通 俗 易 懂 、 具 有 很 强 的 操作 性 和 实用 性 ,可 作为 
高 等 院 校 “网 站 建设 ”和 “网 页 设计 ”类 课程 的 教材 或 参考 书 ,也 可 作为 从 事 网 站 建设 和 网 
页 设计 方面 专业 技术 人 员 的 参考 用 书 。 

为 方便 课堂 教学 ,本 书 提供 电子 教案 和 所 有 实例 的 源 代码 及 相关 素材 。 为 了 使 读者 
巩固 所 学 知识 ,拓展 视野 和 进行 实 训 , 本 书 每 章 后 均 附 有 习题 与 实 训 ,并 且 在 书 末 附 有 习 
题 参 考 答案 。 

由 于 本 书 内 容 丰 富 ,涉及 技术 较 多 ,再 加 上 编者 水 平 有 限 , 书 中 不 足 之 处 在 所 难免 ， 
丸 请 广大 读者 批评 指正 。 


编 者 
2010 年 10 月 
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网 站 开发 与 网 页 设计 是 一 个 涉及 面 广 且 较 为 复杂 的 工程 ,因此 在 开发 网 站 之 前 ,网 
站 开发 者 首先 要 对 网 站 开发 有 个 全 面 的 认识 和 规划 。 本 章 将 从 网 站 的 基本 概念 、 网 站 的 
开发 流程 .撰写 网 站 策划 书 、 网 站 开发 相关 软件 等 方面 介绍 网 站 开发 相关 概念 、 整 体 流程 
等 内 容 。 


1.1 网 下 与 网 页 的 基本 概念 


网 站 开发 者 初次 开发 网 站 之 前 ,首先 要 了 解 与 网 站 相关 的 基本 知识 ,例如 什么 是 网 
页 ,什么 是 网 站 ,网 页 的 分 类 ,网 站 的 分 类 以 及 静态 网 页 和 动态 网 页 的 区 别 等 ,掌握 了 这 
些 基 本 知识 才能 够 在 今后 的 开发 过 程 中 得 心 应 手 。 


1.1.1 网 页 


网 页 是 网 站 的 基本 信息 单元 ,是 WWW(World Wide Web ,万 维 网 或 环球 信息 网 ) 的 
基本 文档 。 它 是 一 种 可 以 在 WWW 上 传输 ,并 能 被 浏览 器 识别 的 文本 文件 。 它 由 文字 、 
图 片 动画、 声音 等 多 媒体 信息 以 及 超 链 接 所 组 成 ,基于 HTML(Hyper Text Mark-up 
Language, 超 文本 标记 语言 ) 编 写 ,通过 超 链接 实现 与 其 他 网 页 或 网 站 的 关联 和 跳 转 。 

一 个 网 站 是 由 多 个 网 页 组 成 的 ,但 不 是 网 页 的 简单 罗列 组 合 , 而 是 用 超 链 接 方 式 组 
成 的 既 有 鲜明 风格 又 有 完善 内 容 的 有 机 整体 。 


1.1.2 网 页 的 分 类 
网 页 的 分 类 方式 很 多 ,下 面 列 出 两 种 最 常见 的 网 页 分 类 方式 。 
1. 根据 网 页 的 位 置 分 类 


根据 网 页 的 位 置 ,网 页 可 分 为 主页 和 内 页 两 类 。 
主页 ,也 称 为 首页 ,是 浏览 者 打开 网 站 时 看 到 的 第 一 个 网 页 ,一 般 以 index、default 等 
作为 文件 名 。 内 页 ,就 是 与 主页 相关 联 的 页 面 .也 就 是 网 站 的 其 他 内 部 页 面 。 
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2. 根据 网 页 的 表现 形式 分 类 


根据 网 页 的 表现 形式 ,网 页 可 分 为 静态 网 页 和 动态 网 页 两 类 。 

静态 网 页 是 指 内 容 * 固 定 不 变 ”, 不 会 随 着 访问 者 、 时 间 、 地 点 的 不 同 而 改变 的 网 页 。 
当 用 户 的 浏览 器 通过 互联 网 的 HTTP(Hypertext Transport Protocol, 超 文本 传输 协议 ) 
协议 向 Web 服务 器 请 求 提供 网 页 内 容 时 ,服务 器 仅仅 是 将 原来 已 设计 好 的 静态 HTML 
文档 传送 给 用 户 的 浏览 器 ,其 基本 工作 原理 如 图 1-1 所 示 。 其 页 面 的 内 容 使 用 的 仅仅 是 
标准 的 HTML 代码 ,最 多 再 加 上 GIF 格式 的 动态 图 片 或 Flash 动画 等 。 


Web 服 务 器 

Web 客 户 机 请 求 (D 接受 请 求 
时 |(2) 找到 静态 网 页 
响应 (3) 发 送 静 态 网 页 


1-1 静态 网 页 的 基本 工作 原理 


静态 网 页 的 优点 是 下 载 速度 快 ,因为 它 不 需要 程序 运算 和 数据 库 连接 。 它 的 缺点 是 
不 易 维护 , 若 网 站 维护 者 要 更 新 网 页 的 内 容 , 就 要 通过 FTP 软件 把 相关 的 网 页 文件 下 载 
下 来 ,必须 手动 来 更 新 其 所 有 的 HTML 文档 。 

静态 网 页 文件 一 般 都 是 以 . html、. htm、. shtml、xml 等 形式 作为 文件 名 的 后 级 。 由 
于 现在 网 站 开发 技术 的 提升 ,即使 是 动态 页 面 也 可 以 在 发 布 时 生成 后 级 为 . html、 htm、 
. shtml、 xml 等 形式 的 文件 ,让 访问 者 看 不 出 来 这 个 网 站 是 用 什么 语言 开发 的 。 

动态 网 页 是 指 可 以 进行 交互 的 网 页 。 当 用 户 的 浏览 器 通过 互联 网 的 HTTP 协议 向 
Web 服务 器 请 求 提 供 网 页 内 容 时 ,服务 器 根据 用 户 浏览 器 的 请 求 ,连接 相应 的 数据 库 , 然 
后 执行 服务 器 端 程序 ,生成 静态 HTML 文档 ,最 后 将 其 传送 给 用 户 的 浏览 器 ,其 基本 工 
作 原 理 如 图 1-2 所 示 。 

Web 服 务 器 
(接受 请 求 
Web 客 户 机 (2) 找到 动态 网 页 
各 请 求 | (3) 执行 动态 网 页 中 的 服务 器 


二 端 脚本 ， 并 生成 静态 网 页 
(4) 发 送 静态 网 页 


图 1-2 动态 网 页 的 基本 工作 原理 


动态 页 面 的 优点 是 效率 高 .更 新 快 、 移 植 性 强 , 从 而 快速 地 达到 所 见 即 所 得 的 目的 。 
但 是 它 的 优点 同样 也 是 它 的 缺点 ,因为 它 的 大 部 分 功能 都 要 通过 频繁 地 和 数据 库 进 行 通 
信 才 能 实现 ,频繁 地 读 取 数 据 库 会 导致 服务 器 要 花费 大 量 的 时 间 来 进行 处 理 , 当 访问 者 
达到 一 定 的 数量 后 ,会 导致 效率 急剧 下 降 。 

目前 ,常用 的 动态 网 页 技术 有 ASP、ASP. NET、JSP、PHP 等 。 


1.1.3 网 站 
网 站 是 由 多 个 网 页 组 成 的 ,但 不 是 网 页 的 简单 罗列 组 合 ,而 是 用 超 链接 方式 组 成 的 
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既 有 鲜明 风格 又 有 完善 内 容 的 有 机 整体 。 简 单 地 说 ,网 站 是 一 种 通信 工具 ,就 像 布告 栏 
一 样 ,用 户 可 以 通过 网 站 来 发 布 自己 想 要 公开 的 资讯 .或 者 利用 网 站 来 提供 相关 的 网 络 
服务 。 人 们 可 以 通过 浏览 器 来 访问 网 站 ,获取 自己 需要 的 信息 或 者 享受 其 网 络 服务 。 


1.1.4 网 站 的 分 类 
网 站 的 分 类 方式 很 多 ,在 此 根据 网 站 提供 的 服务 不 同和 网 站 的 性 质 不 同 分 别 加 以 介绍 。 
1. 根据 网 站 提供 的 服务 分 类 


1) 资讯 类 网 站 

这 类 网 站 以 提供 信息 为 主要 目的 ,其 网 站 投资 者 的 主要 目的 是 在 互联 网 上 建立 一 个 
宣传 册 ,不 要 求实 现 业 务 或 工作 逻辑 。 目 前 大 部 分 的 政府 和 企业 网 站 都 属于 这 类 网 站 。 

2) 交易 类 网 站 

这 类 网 站 就 是 人 们 通常 所 理解 的 电子 商务 网 站 ,以 实现 交易 为 目的 ,以 订单 为 中 心 。 
这 类 网 站 中 最 著名 的 当 属 亚马逊 ,淘宝 当当、 卓越 也 是 其 中 的 佼佼 者 。 

3) 互动 游戏 类 网 站 

这 是 近年 来 国内 逐渐 风靡 起 来 的 一 种 网 站 ,为 用 户 提供 在 线 的 免费 或 收费 游戏 服 
务 。 其 代表 网 站 有 传奇 .仙剑 情缘 、 联 众 .腾讯 等 。 

4) 有 偿 资 讯 类 网 站 

这 类 网 站 与 资讯 类 网 站 相似 ,也 是 以 提供 资讯 为 主 。 不 同 的 是 它们 提供 的 资讯 是 要 
求 有 直接 回报 的 。 这 类 网 站 中 的 佼佼 者 主要 有 101 网 校 等 。 

5) 功能 型 网 站 

这 类 网 站 是 近 几 年 发 展 起 来 的 一 种 网 站 ,最 著名 的 代表 是 Google 和 Baidu。 其 特点 
是 将 一 个 具有 广泛 需求 的 功能 扩展 开 来 ,开发 一 套 强大 的 支撑 体系 。 

6) 综合 类 网 站 

这 类 网 站 具有 功能 强大 和 内 容 丰 富 的 特点 ,如 雅虎 、 新 浪 和 搜狐 等 都 属于 综合 类 网 站 。 


2. 根据 网 站 的 性 质 分 类 


网 站 根据 性 质 不 同 可 分 为 政府 网 站 ,企业 网 站 、 商 业 网 站 、 教 育 科 研 机 构 网 站 、 个 人 
网 站 、 其 他 非 营 利 机 构 网 站 以 及 其 他 类 型 网 站 等 。 

根据 调查 显示 ,企业 网 站 数量 的 比例 最 大 , 占 整个 网 站 的 70.9% ,其 次 为 商业 网 站 ， 
占 8.2%, 第 三 是 个 人 网 站 , 占 6.5%, 随 后 依次 为 教育 科研 机 构 网 站 占 5.1%, 其 他 非 营 
利 机 构 网 站 占 5.0% ,政府 网 站 占 3. 2% ,其 他 类 型 的 网 站 占 1. 1%。 


1.2 网 下 的 开发 琉 程 


网 站 开发 是 一 个 庞大 的 项 目 , 通 常 都 是 由 一 个 开发 团队 来 完成 。 网 站 开发 流程 如 
图 1-3 所 示 , 它 包括 前 期 的 确定 网 站 的 主题 、 网 站 的 整体 规划 、 收 集 整 理 网 站 素材 ;中 期 的 
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开发 与 测试 网 站 、 域 名 空间 的 申请 与 备案 ,发 布 网 站 ;后 期 的 更 新 维护 网 站 和 宣传 与 推广 


网 站 。 作 为 一 个 网 站 开发 团队 ,首先 要 掌握 网 站 开发 的 整个 流程 ,制订 出 一 个 可 行 的 方 
案 , 在 此 基础 上 合理 分 工 、 相 互 合作 ,最 终 完成 网 站 的 开发 。 


CM 一 XC 帆 XC 讽 


确定 网 站 的 主题 开发 与 测试 网 站 更 新 维护 网 站 
网 站 的 整体 规划 域名 空间 的 申请 与 备案 宣传 与 推广 网 站 
收集 整理 网 站 素材 发 布 网 站 


1-3 网 站 开发 流程 


1.2.1 确定 网 站 主题 


开发 一 个 网 站 ,首先 必须 要 考虑 的 就 是 网 站 的 内 容 问 题 , 即 确定 网 站 的 主题 。 那 么 
如 何 确定 网 站 的 主题 呢 ? 
首先 要 分 析 了 解 各 类 网 站 的 发 展 情况 ,为 网 站 的 定位 指明 一 个 正确 的 方向 ;其 次 要 


根据 用 户 的 需求 特点 ,调查 市 场 ,初步 确定 网 站 的 主题 内 容 ; 最 后 通过 可 行 性 分 析 , 初 步 
考虑 可 采用 的 实现 技术 ,最 终 确定 网 站 的 主题 。 


网 站 主题 的 定位 应 以 下 列 原则 为 依据 : 
1. 主题 要 小 而 精 


选择 题材 时 ,要 突出 重点 ,突出 特色 ,不 要 将 所 有 认为 精彩 的 内 容 都 放 在 网 站 上 面 ， 
否则 会 导致 网 站 没有 核心 内 容 , 没 有 特色 。 


2. 题材 应 结合 用 户 本 身 的 特点 和 优势 

选择 题材 时 ,应 该 以 用 户 的 需求 为 重点 ,突出 用 户 自身 的 特点 和 优势 。 

3. 题材 不 要 太 滥 ,目标 不 要 太 高 

“题材 太 滥 ”是 指 选 择 题材 时 ,不 应 该 选择 到 处 可 见 、 人 人 都 有 的 题材 。“ 目 标 太 高 ” 
是 指 假设 在 这 一 题材 上 已 经 有 非常 优秀 、 知 名 度 很 高 的 站 点 ,要 超过 它 很 困难 ,除非 下 决 
心 和 有 实力 竞争 并 超过 它 。 

网 站 开发 者 只 有 遵循 这 些 原则 ,才能 够 量体裁衣 ,确定 出 用 户 需要 的 网 站 主题 。 
1.2.2 网 站 整体 规划 


网 站 主题 确定 之 后 ,就 应 该 对 网 站 进行 整体 规划 。 整 体 规划 主要 包括 网 站 的 目标 、 
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网 站 的 名 称 、 网 站 的 功能 、 网 站 的 内 容 、 网 站 的 风格 、 网 站 的 结构 以 及 网 站 的 实现 技术 
等 等 。 


1. 网 站 的 目标 


建设 一 个 网 站 从 一 开始 就 应 该 有 一 个 明确 的 发 展 目标 ,可 以 从 以 下 几 点 来 考虑 : 

(1) 明确 网 站 将 来 的 访问 对 象 , 即 明确 网 站 的 服务 对 象 。 

(2) 明确 网 站 提供 的 服务 项 目 。 

(3) 明确 网 站 的 发 展 定位 ,确定 网 站 的 发 展 方向 。 

网 站 的 目标 定位 要 冷静 、 认 真 去 思考 ,不 要 好 高 警 远 , 这 样 才能 够 实 实 在 在 确定 网 站 
的 定位 和 发 展 目标 。 


2. 网 站 的 名 称 


确定 网 站 的 主题 之 后 ,就 可 以 确定 网 站 的 名 称 。 名 称 至 关 重 要 , 它 对 网 站 的 形象 和 
宣传 推广 具有 很 大 的 影响 。 因 此 ,网 站 的 名 称 应 该 正派 大 气 、 易 记 、 有 特色 。 


3. 网 站 的 功能 


网 站 的 功能 设计 在 网 站 的 建设 当中 起 着 相当 重要 的 作用 ,是 整个 网 站 规划 中 最 为 核 
心 的 一 步 , 设 计 出 新 颖 强大 的 功能 ,对 于 网 站 的 建设 和 推广 营销 来 说 是 一 个 关键 的 环节 。 
设计 网 站 功能 时 ,设计 者 应 以 网 站 的 目标 、 内 容 为 基础 ,以 此 考虑 如 何 实现 网 站 目标 , 体 
现 网 站 内 容 。 


4. 网 站 的 内 容 


网 站 的 内 容 是 网 站 规划 的 一 项 重点 , 它 直 接 影响 到 一 个 网 站 的 受 欢 迎 程 度 。 因 此 ， 
网 站 的 内 容 结构 必须 清晰 ,注意 突出 网 站 的 形象 和 特色 。 网 站 内 的 网 页 应 由 多 种 成 分 组 
成 ,但 多 媒体 信息 的 使 用 要 适中 。 网 站 的 内 容 结构 应 使 用 户 方便 浏览 ,尽量 选择 突出 网 
站 特色 的 内 容 。 总 之 ,对 网 站 内 容 的 设计 ,应 尽量 周密 细致 ,体现 创意 。 


5. 网 站 的 风格 


网 站 的 风格 是 个 抽象 的 概念 , 它 是 指 网 站 的 整体 形象 给 浏览 者 的 综合 感觉 。 它 是 通 
过 网 页 元 素来 体现 的 ,网 页 色彩 .平面 构成 .文字 、 图 像 等 元 素 都 会 直接 影响 网 站 风格 。 
此 外 ,由 于 每 一 个 设计 者 的 能 力 、 生 存 环境 和 性 格 都 有 所 不 同 ,这 些 因 素 也 会 对 其 产生 

如 何 树立 网 站 风格 呢 ? 可 以 分 这 样 几 个 步骤 来 实现 : 

(1) 风格 是 建立 在 内 容 之 上 的 ,因此 ,要 首先 保证 内 容 的 质量 和 价值 性 。 

(2) 需要 彻底 弄 明 白 希 望 网 站 给 人 的 第 一 印象 是 什么 。 

(3) 在 明确 自己 的 网 站 印象 后 ,开始 努力 建立 和 加 强 这 种 印象 。 
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风格 的 形成 不 是 一 次 定位 的 ,而 是 需要 在 实践 中 不 断 强 化 、 调 整 和 修饰 。 
6. 网 站 的 结构 


确立 好 网 站 的 主题 ,内 容 之 后 ,就 要 确定 网 站 的 结构 了 。 网 站 的 结构 就 是 对 网 站 的 
内 容 、 功 能 进行 一 个 层次 化 的 组 织 方式 , 它 包 括 网 站 的 目录 结构 和 链接 结构 。 清 晰 的 目 
录 结 构 有 利于 站 点 的 维护 ,而 优秀 的 链接 结构 有 利于 使 用 最 少 的 链接 ,达到 最 好 的 链接 
效果 。 

1) 网 站 的 目录 结构 

目录 结构 , 即 网 站 的 物理 结构 ,是 指 建立 网 站 时 创建 的 目录 的 结构 。 要 根据 网 站 的 
主题 和 内 容 来 分 类 规划 目录 ,不 同 的 栏目 要 对 应 不 同 的 目录 ,在 各 个 栏目 目录 下 也 要 根 
据 内 容 的 不 同 建立 子 目 录 。 例 如 将 网 页 图 片 放 到 images 目录 下 ,新 闻 放 到 news 目录 
下 ,数据 库 放 到 database 目录 下 等 。 

下 面 是 建立 目录 结构 的 一 些 建议 : 

(1) 不 要 将 所 有 的 文件 放 在 根 目录 下 。 

(2) 按 栏目 内 容 建立 子 目 录 。 

(3) 目录 的 层次 不 可 太 多 ,建议 不 要 超过 3 层 。 

(4) 不 要 使 用 中 文 名 字 的 目录 名 。 

(5) 不 要 使 用 过 长 的 目录 名 。 

(6) 尽量 使 用 意义 明确 的 目录 名 , 即 尽量 做 到 “ 见 名 知 义 ”。 

2) 网 站 的 链接 结构 

链接 结构 , 即 网 站 的 逻辑 结构 ,是 指 页 面 之 间 相互 链接 的 拓扑 结构 。 它 建立 在 目录 
结构 的 基础 之 上 ,但 可 以 跨越 目录 。 形 象 地 说 ,每 个 页 面 都 是 一 个 固定 点 ,链接 则 是 在 两 
个 固定 点 之 间 的 连 线 。 一 个 点 可 以 和 一 个 点 连接 ,也 可 以 和 多 个 点 连接 ,这 些 点 并 不 分 
布 在 一 个 平面 上 ,而 是 存在 于 一 个 立体 空间 中 。 一 般 情况 下 ,建立 网 站 的 链接 结构 有 以 
下 两 种 基本 方式 。 

(1) 树 状 链接 结构 

类 似 Windows 操作 系统 的 资源 管理 器 中 的 目录 结构 ,首页 链接 指向 一 级 页 面 ,一 级 
页 面 链接 指向 二 级 页 面 。 这 样 的 链接 结构 浏览 时 ,一 级 一 级 进入 ,一 级 一 级 退出 。 优 点 
是 条 理 清晰 ,访问 者 能 够 明确 知道 自己 在 什么 位 置 .不 会 “迷路 ”; 缺 点 是 浏览 效率 低 , 从 
一 个 栏目 下 的 子 页 面 到 另 一 个 栏目 下 的 子 页 面 ,必须 绕 经 首页 。 

(2) 星 状 链接 结构 

类 似 网 络 服务 器 的 连接 ,每 个 页 面相 互 之 间 都 建立 有 链接 ,立体 结构 像 东 方 明 珠 电 
视 塔 上 的 钢 球 。 这 种 链接 结构 的 优点 是 浏览 方便 ,随时 可 以 到 达 自 己 喜 欢 的 页 面 。 缺点 
是 链接 太 多 ,容易 使 浏览 者 迷路 , 搞 不 清 自己 在 什么 位 置 . 看 了 多 少 内 容 。 

这 两 种 基本 结构 都 是 理想 方式 ,在 实际 的 网 站 设计 中 ,总 是 将 这 两 种 结构 结合 起 来 
使 用 ,希望 浏览 者 既 可 以 方便 快速 地 到 达 自 己 需要 的 页 面 ,又 可 以 清晰 地 知道 自己 的 位 
置 。 所 以 最 好 的 办 法 是 : 首页 和 一 级 页 面 之 间 用 星 状 链接 结构 ,一 级 和 二 级 页 面 之 间 用 
树 状 链接 结构 。 
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7. 网 站 的 技术 实现 


规划 好 网 站 的 功能 和 结构 之 后 ,就 要 确定 网 站 的 技术 解决 方案 ,主要 应 考虑 以 下 几 
个 方面 的 内 容 : 

(1) Web 服务 器 的 选择 ,选择 采用 自 建 服务 器 还 是 租用 服务 器 或 虚拟 主机 。 

(2) 选择 操作 系统 ,用 UNIX、Linux 还 是 Windows Server。 根 据 投入 成 本 功能、 开 
发 .稳定 性 和 安全 性 等 进行 分 析 ,选择 合适 的 操作 系统 。 

(3) 采用 系统 性 的 解决 方案 (如 IBM、HP 等 公司 提供 的 企业 上 网 方案 、 电 子 商 务 解 
决 方案 等 ), 还 是 自己 开发 方案 。 

(4) 网 站 安全 性 措施 ,开发 网 站 时 应 考虑 安全 措施 并 且 制 定 出 相应 的 防 黑 、 防 病毒 
方案 。 

(5) 相关 页 面 及 程序 开发 方案 。 首 先 要 考虑 设计 页 面 的 软件 ,如 Dreamweaver、 
Photoshop、Flash 等 ,其 次 要 选择 相应 的 网 页 程序 开发 语言 ,如 ASP、JSP、PHP、ASP. 
NET 等 ,最 后 还 要 考虑 网 站 后 台数 据 库 方案 ,如 Access、SQL Server 等 。 


1.2.3 收集 整理 网 站 素材 


收集 整理 网 站 素材 是 网 站 开发 的 一 个 重要 步骤 ,只 有 充实 的 内 容 才 能 够 体现 网 站 的 
特色 ,吸引 浏览 者 的 注意 力 。 收 集 整 理 网 站 素材 包括 搜集 、 整 理 加 工 、 制 作 和 存储 等 环 
节 。 要 想 让 自己 的 网 站 有 “ 血 ”" 有 “ 肉 ”, 能 够 吸引 住 用 户 , 就 必须 尽量 搜集 素材 。 搜 集 的 
素材 越 多 ,以 后 制作 网 站 就 越 容易 。 搜 集 的 素材 包括 文本 、 图 片 . 动 画 、 背 景 音乐 等 ,主要 
由 客户 提供 ,搜集 者 也 可 以 通过 网 络 报纸、 其 他 媒体 等 多 方面 多 渠道 进行 搜集 。 搜 集 到 
的 素材 要 进行 适当 加 工 , 如 图 片 扫描 、 文 字 录 入 、 图 片 剪 辑 等 。 加 工时 要 注意 保存 原始 素 
材 ,避免 加 工 不 适 后 无 法 重 来 ,加 工 后 的 素材 要 分 门 别 类 保存 在 专门 的 文件 夹 中 ,以 便 后 
期 使 用 。 

需要 提醒 的 是 有 些 素材 是 有 版 权 保护 的 ,必须 经 过 授权 才 可 以 正常 合法 使 用 。 


1.2.4 开发 与 测试 网 站 


网 站 规划 完成 后 就 可 以 开始 网 站 的 开发 与 测试 。 一般 情况 下 , 它 包 括 网 站 页 面 设 
计 、 网 站 程序 设计 和 测试 网 站 三 个 阶段 。 网 站 开发 之 初 由 美工 人 员 、 设 计 人 员 设 计 网 站 
的 页 面 效果 图 ,并 将 效果 图 拆 分 成 网 页 。 同 时 ,程序 员 要 根据 网 站 规划 设计 网 站 数据 库 
及 编写 网 站 程序 ,等 到 网 页 设计 完毕 之 后 ,再 在 网 页 中 编写 后 台 脚 本 。 

至 此 ,网 站 开发 已 初步 完成 ,但 这 并 不 意味 着 网 站 开发 没有 问题 ,因此 还 需要 网 站 测 
试 人 员 测试 整个 网 站 ,如 发 现 问题 和 错误 ,应 及 时 与 网 站 开发 人 员 沟通 ,解决 相应 的 问题 
和 错误 。 


1. 网 站 页 面 设计 
网 站 页 面 设计 包括 首页 设计 和 其 他 内 页 设计 。 


10 Mu issaiud 


1) 首页 的 设计 

对 于 一 个 网 站 来 说 ,首页 是 至 关 重 要 的 。 首 页 的 好 坏 , 可 以 直接 影响 浏览 者 的 情绪 。 
设计 首页 首先 需要 绘制 一 张 草 图 ,草图 应 包括 网 站 的 标志 、 广 告 条 、 菜 单 栏 和 友情 链接 等 
一 些 基 本 的 部 件 。 设 计 者 根据 部 件 的 重要 性 ,合理 地 布置 部 件 的 位 置 。 首 页 的 草图 设计 
好 之 后 ,就 可 以 使 用 设计 工具 制作 首页 了 。 

在 设计 上 ,首页 的 设计 最 好 遵循 干净 而 清爽 的 原则 ,同时 还 应 注意 以 下 几 个 方面 ， 

(1) 尽量 不 要 放置 太 多 的 图 片 或 者 大 图 片 ,从 而 减少 网 页 的 下 载 显 示 时 间 。 

(2) 画面 不 要 设计 得 杂乱 无 章 ,否则 会 使 浏览 者 不 易 找 到 所 需要 的 东西 。 

(3) 重视 标记 (Logo) 设 计 ,一旦 进入 网 页 ,最 引 人 注 目的 就 是 标记 , 它 是 一 个 网 页 的 
画龙点睛 之 笔 , 它 的 好 坏 直 接 影响 网 页 的 整体 效果 。 

2) 其 他 内 页 的 设计 

网 站 其 他 页 面 设计 和 制作 并 没有 首页 制作 那么 复杂 ,但 设计 和 制作 的 方法 与 首页 一 
样 。 在 此 ,用 户 需 要 注意 以 下 几 点 。 

(1) 保持 与 首页 相同 的 风格 。 

(2) 其 他 网 页 一 般 情况 下 要 有 返回 首页 的 链接 。 

(3) 目录 结构 不 要 太 复 杂 。 


2. 网 站 程序 设计 


完成 网 站 静态 页 面 设计 后 ,需要 为 网 站 添加 动态 脚本 . 换 句 话说 ,就 是 要 设计 网 站 的 
程序 。 网 站 的 程序 设计 包括 数据 库 设计 和 后 台 脚 本 设计 。 

1) 数据 库 设计 

设计 数据 库 时 ,程序 员 需 要 根据 网 站 的 功能 规划 ,内 容 规划 建立 用 户 、. 表 、 索 引 、 存 储 
过 程 等 ,同时 根据 构造 的 查询 语句 的 需要 ,建立 相应 的 视图 ,最 终 完成 数据 库 的 设计 。 

2) 后 台 脚 本 设计 

后 台 脚 本 设计 主要 是 使 用 合适 的 脚本 语言 编写 实现 数据 库 的 读 、 写 .显示 等 操作 的 
程序 以 及 一 些 过 程控 制 及 特效 程序 。 


3. 测试 网 站 


在 完成 网 站 开发 后 ,需要 对 网 站 进行 测试 。 测 试 的 目的 是 找 出 网 站 的 错误 和 问题 ， 
从 而 更 改 错误 ,解决 问题 。 网 站 测试 主要 包括 功能 测试 .浏览 器 兼容 性 测试 和 超 链 接 
测试 。 

功能 测试 就 是 测试 者 根据 用 户 的 目标 、 功 能 要 求 、 管 理 方式 使 用 习惯 等 ,对 网 站 的 
功能 一 一 进行 测试 ,测试 用 户 需要 的 功能 是 否 都 已 实现 。 请 用 户 试 使 用 ,发 现 系统 设计 
中 隐藏 的 错误 和 缺陷 ,提出 后 开发 者 应 予以 改进 . 尽 可 能 满足 用 户 的 功能 需求 。 

浏览 器 兼容 性 测试 就 是 根据 不 同 的 用 户 使 用 不 同 的 浏览 器 的 习惯 , 找 出 各 个 浏览 器 
对 各 种 脚本 语言 的 解释 存在 的 差异 ,以 保证 页 面 的 兼容 性 及 显示 的 一 致 性 ,满足 大 多 数 
用 户 的 需要 。 在 测试 中 ,应 尽 可 能 地 使 用 多 种 版 本 的 浏览 器 来 测试 网 页 ,最 好 使 用 大 多 
数 用 户 常 用 的 浏览 器 版 本 ,尽量 不 要 使 用 最 新 版 本 的 浏览 器 进行 测试 ,因为 许多 高 版 本 
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中 能 显示 的 效果 ,在 低 版 本 中 不 一 定 能 够 实现 。 
超 链接 测试 就 是 测试 网 站 中 各 个 超 链接 的 可 用 性 、 正 确 性 ,使 浏览 者 通过 超 链接 能 
够 顺利 地 访问 目标 页 面 。 


1.2.5 域名 空间 的 申请 与 备案 


1. 域名 的 申请 


域名 (Domain Name) 是 网 站 在 互联 网 上 的 名 字 , 每 一 个 域名 只 能 对 应 一 个 IP 地 址 ， 
但 是 一 个 IP 地 址 可 以 对 应 多 个 域名 。 一 个 成 功 的 网 站 ,其 所 有 建设 的 价值 ,都 凝聚 在 域 
名 上 ,可 以 说 独立 的 域名 是 网 站 的 第 一 笔 财富 :域名 也 被 誉 为 “企业 的 网 上 商标 ”。 

域名 在 互联 网 上 是 国际 通行 的 ,全 世界 都 可 以 通过 域名 访问 某 一 个 网 站 。 域 名 也 是 
唯一 的 , 谁 先 注册 , 谁 就 拥有 使 用 权 。 注 册 某 一 域名 后 ,全 世界 其 他 任何 机 构 或 个 人 都 无 
权 再 注册 相同 的 域名 ,因而 域名 资源 也 是 有 限 的 。 

在 选取 域名 时 ,应 该 以 简明 、 易 记 、 便 于 输入 和 具有 一 定 的 内 涵 为 原则 进行 命名 。 域 
名 多 以 企业 名 称 的 汉语 拼音 、 英 文 名 称 、 名 称 的 缩写 ,汉语 拼音 的 谐音 以 及 中 英文 结合 等 
形式 进行 命名 。 

中 国 互联 网 络 信息 中 心 (CNNIC) (http://www. cnnic. net. cn) ,是 国内 域名 注册 的 
权威 机 构 ,下面 以 注册 一 个 国内 域名 为 例 ,介绍 注册 域名 的 具体 步 又 。 

1) 确定 域名 注册 代理 商 

首先 访问 中 国 互 联网 络 信息 中 心 找到 CN 域名 注册 服务 机 构 , 例 如 北京 万 网 志 成 科 
技 有 限 公 司 .北京 新 网 数码 信息 技术 有 限 公司 .阿里 巴巴 (中 国 ) 网 络 技术 有 限 公司 、 厦 门 
中 资源 网 络 有 限 公司 等 。 

2) 搜索 域名 

在 注册 之 前 必须 先 检索 自己 选择 的 域名 是 否 已 经 被 注册 ,检索 有 很 多 种 方式 ,最 简 
单 的 莫 过 于 上 网 进行 查询 了 ,可 以 到 中 国 互 联网 络 信息 中 心 CCNNIC) 网 站 或 者 CNNIC 
认证 域名 服务 机 构 的 网 站 进行 查询 。 如 果 想 申请 的 域名 已 经 被 别人 注册 ,页 面 会 给 出 提 
示 ,那么 只 能 重新 选择 一 个 没有 被 注册 的 域名 了 。 

3) 注册 域名 

如 果 域 名 尚未 被 注册 ,系统 会 提示 可 以 注册 , 单 击 “ 继 续 ” 按 钮 即 可 进行 注册 。 

4) 注册 用 户 

填写 用 户 名 及 密码 ,如 果 已 注册 过 域名 , 则 填 和 人 原 有 的 用 户 名 及 密码 ,这样 就 无 须 填 
写 下 一 步 的 “注册 申请 表 ” 了 。 

5) 填写 注册 申请 表 

可 以 通过 Web 方式 或 下 载 申 请 表格 两 种 方式 填写 注册 申请 表 。 填 写 完毕 ,检查 无 
误 后 就 进入 付款 流程 。 

6) 确认 付款 方式 

一 般 代理 商都 提供 多 种 付款 方式 ,如 银行 电汇 、 邮 局 汇款 、 网 上 支付 等 ,用 户 可 以 根 
据 具 体 情况 自行 选择 ,在 收 到 支付 的 款项 后 ,代理 商会 为 用 户 办 理 完毕 所 有 的 域名 注册 
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手续 ,域名 即 注册 成 功 。 

7) 域名 管理 

在 域名 成 功 注册 后 ,用 户 就 可 以 使 用 注册 用 户 名 和 密码 登录 到 代理 商 网 站 的 域名 管 
理 系 统 , 对 域名 进行 如 下 操作 。 

(1) 基本 信息 修改 : 可 以 修改 注册 时 所 填写 的 个 人 信息 。 

(2) DNS( 域 名 解析 服务 ) 的 修改 : 可 以 修改 域名 所 对 应 的 IP 地 址 。 

(3) URL 转发 功能 : 通过 此 功能 ,可 将 域名 转 至 任何 一 个 HTTP 地 址 。 


2. 空间 的 申请 


网 站 空间 就 是 用 来 存放 网 站 内 容 的 计算 机 空间 ,任何 网 站 都 必须 放 在 网 站 空间 上 ， 
这 样 才能 够 将 域名 与 空间 绑 定 ,使 浏览 者 能 够 在 互联 网 上 通过 域名 访问 对 应 的 网 站 。 

网 站 空间 根据 规模 大 小 可 以 分 为 虚拟 主机 、 自 架设 服务 器 两 种 。 如 果 是 大 型 企业 、 
政府 ,学 术 单位 等 ,能 够 负担 得 起 昂贵 的 设备 (高 等 级 的 计算 机 主机 与 宽带 专线 月 租 费 
用 ) 与 人 事 费用 则 需要 考虑 自行 架设 服务 器 。 对 一 般 中 小 企业 .工作 室 . 个 人 而 言 最 省 钱 
而 又 有 效率 的 方式 ,就 是 向 ISP(Internet Service Provider ,互联 网 服务 提供 者 ) 申 请 虚拟 
主机 ,也 就 是 在 ISP 所 架设 的 Web 服务 器 上 租 一 块 空 间 ,放置 你 的 网 站 。 


3. 域名 空间 的 备案 


根据 工业 和 信息 化 部 的 相关 规定 ,在 国内 开办 网 站 ,应 当 履 行 域名 和 空间 的 备案 手 
续 。 未 经 备案 ,不 得 在 中 华人 民 共 和 国境 内 开办 网 站 。 在 各 地 通信 管理 局 进行 清查 网 站 
时 ,如 果 发 现 未 经 备案 的 网 站 ,将 予以 关闭 或 罚款 。 对 已 经 开通 的 网 站 ,应 在 2005 年 7 
月 1 日 前 完成 备案 手续 。 从 2005 年 7 月 1 日 起 ,新 注册 域名 和 空间 开办 的 网 站 ,应 在 开 
通 时 一 并 提交 备案 表格 ,由 空间 服务 商 免费 代办 备案 ,当然 也 可 以 通过 访问 工信部 网 站 
(http://www. miibeian. gov. cn) 自行 办 理 域名 和 空间 的 备案 手续 。 


1.2.6 发 布 网 站 


当 完 成 了 网 站 的 设计 、 制 作 测试 等 工作 后 ,就 需要 把 设计 好 的 网 站 的 全 部 文件 上 传 
到 服务 器 来 完成 整个 网 站 的 发 布 。Dreamweaver 内 置 了 强大 的 FTP 功能 ,可 以 帮助 用 
户 实现 对 站 点 文档 的 上 传 和 下 载 。 当 然 , 用 户 也 可 以 选择 其 他 FTP 工具 上 传 和 下 载 网 
站 ,如 CuteFTP、FlashFXP、LeapFTP 等 。 


1.2.7 更 新 和 维护 网 站 


网 站 上 传 完 毕 之 后 ,还 需要 经 过 一 系列 的 网 站 更 新 和 维护 操作 ,才能 够 正常 地 营运 。 
通常 ,需要 每 隔 一 段 时 间 对 网 站 的 某 些 页 面 进行 更 新 ,保持 网 站 内 容 的 新 鲜 感 以 吸引 更 
多 的 浏览 者 。 同 时 ,由 于 病毒 感染 、 黑 客 入 侵 等 各 方面 的 安全 隐患 ,用 户 还 应 该 定期 检查 
页 面 元 素 和 各 种 超 链接 是 否 正常 ,并 且 定 期 对 网 站 进行 备份 ,以 便 网 站 遭 到 破坏 后 能 够 
及 时 恢复 ,从 而 保障 网 站 的 正常 运行 。 
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1.2.8 宣传 与 推广 网 站 


网 站 开通 后 ,就 像 注册 了 公司 一 样 , 必 须 进行 有 效 的 宣传 推广 ,才能 变 得 知名 ,并 带 
来 经 济 效益 。 网 站 的 宣传 推广 主要 有 如 下 几 种 方式 。 


1. 注册 到 搜索 引擎 


注册 到 搜索 引擎 是 极为 方便 的 一 种 宣传 网 站 的 方法 ,目前 比较 有 名 的 搜索 引擎 主要 
有 雅虎 ,百度 .谷歌 等 。 注 册 时 尽量 详尽 地 填写 网 站 中 的 一 些 主要 信息 ,特别 是 一 些 关键 
词 ,尽量 写 得 普遍 化 、 大 众 化 一 些 ,注册 分 类 时 尽量 分 得 细 一 些 。 


2. 交换 广告 条 


交换 广告 条 是 宣传 网 站 的 一 种 较为 有 效 的 方法 。 登 录 到 广告 交换 网 ,填写 一 些 主要 
的 信息 ,例如 广告 图 片 、 网 站 网 址 等 ,然后 它 会 要 求 你 将 一 段 HTML 代码 加 入 到 网 站 中 。 
这 样 ,你 的 广告 条 就 可 以 在 其 他 网 站 上 出 现 。 当 然 , 你 的 网 站 上 也 会 出 现 别 的 网 站 的 广 
告 条 ,双方 得 益 。 

我 国 的 广告 交换 网 主要 有 : 太极 链 (http://www. textclick. com)、 火炬 广告 交换 网 
(http://www. yuanjh. heha. net)、 网 盟 广告 交换 网 Chttp:/Vwww. webunion. com)。 男 
外 也 可 以 跟 一 些 兄弟 网 站 或 者 朋友 的 网 站 交换 友情 链接 ,当然 网 站 最 好 是 点 击 率 比 较 高 
的 。 当 访问 者 被 广告 标题 所 吸引 并 点 击 时 , 即 被 链接 到 广告 发 布 者 的 网 站 上 ,达到 网 站 
推广 的 目的 。 


3. Meta 标签 的 使 用 


使 用 Meta 标签 是 简单 而 且 有 效 地 宣传 网 站 的 一 种 方法 ,不 需要 去 搜索 引擎 注册 就 
可 以 让 客户 搜索 到 你 的 网 站 。 

将 下 面 这 段 代码 加 入 到 网 页 标签 中 。 

<meta name="keywords" content=" 网 站 名 称 ， 产品 名称 ，…"> 

在 content 里 边 填写 关键 词 ,关键 词 最 好 要 大 众 化 , 跟 企 业 文化 .公司 产品 等 紧密 相 
关 , 并 且 尽 量 多 写 一 些 , 可 以 将 一 些 相关 的 关键 词 重 复 罗 列 , 这 样 可 以 提高 网 站 的 排行 。 

4. 直接 跟 客 户 宣传 

一 个 稍 具 规模 的 公司 一 般 都 有 业务 部 、 市 场 部 或 者 客户 服务 部 ,可 以 在 跟 客 户 打 交 
道 时 直接 将 公司 网 站 的 网 址 告诉 给 客户 ,或 者 直接 给 客户 发 E-mail 等 。 宣 传 途 径 很 多 ， 
可 以 根据 自身 的 特点 选择 一 些 较 为 便捷 有 效 的 方法 。 


1.3 撰写 网 下 策 刘 书 


一 个 网 站 的 成 功 与 否 与 建站 前 的 网 站 策划 有 着 极为 重要 的 关系 。 在 建立 网 站 前 应 
明确 建设 网 站 的 目的 、 确 定 网 站 的 功能 、 确 定 网 站 规模 、 投 入 费用 、 进 行 必要 的 市 场 分 析 
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等 等 ,只 有 做 到 详细 的 策划 ,才能 避免 在 网 站 建设 中 出 现 诸多 问题 ,使 网 站 建设 得 以 顺利 
进行 。 

网 站 策划 是 指 在 网 站 建设 前 对 市 场 进行 分 析 , 确 定 网 站 的 目的 和 功能 ,并 根据 需要 
对 网 站 建设 中 的 技术 、 内 容 、 费 用 、 测 试 、 维 护 等 做 出 规划 。 网 站 策划 对 网 站 建设 起 到 计 
划 和 指导 的 作用 ,对 网 站 的 内 容 维 护 起 到 定位 的 作用 。 


1.3.1 网 站 策划 书 撰写 要 点 


撰写 网 站 策划 书 应 该 尽 可 能 涵盖 网 站 规划 中 的 各 个 方面 ,网 站 策划 书 的 写作 要 科 
学 ,认真 实事求是。 下 面 以 最 常见 的 企业 网 站 为 例 , 介 绍 网 站 策划 书 的 撰写 要 点 。 


1. 前 期 调研 分 析 


(1) 相关 行业 的 市 场 是 怎样 的 ,有 什么 样 的 特点 ,是 否 能 够 在 互联 网 上 开展 公司 
业务 。 

(2) 市 场 主要 竞争 者 分 析 ,竞争 对 手 上 网 情况 及 其 网 站 策划 功能 作用 。 

(3) 公司 自身 条 件 分 析 、 公 司 概况 .市场 优势 ,可 以 利用 网 站 提升 哪些 竞争 力 ,建设 网 
站 的 能 力 (费用 ,技术 、 人 力 等 )。 


2. 网 站 主题 定位 和 功能 定位 


(1) 确定 网 站 的 主题 及 目的 ,是 为 了 树立 企业 形象 ,宣传 产品 ,进行 电子 商务 ,还 是 建 
立行 业 性 网 站 。 

(2) 根据 需要 和 计划 ,确定 网 站 的 功能 类 型 : 企业 型 网 站 、 应 用 型 网 站 、 商 业 型 网 站 、 
电子 商务 型 网 站 。 企 业 网 站 又 分 为 企业 形象 型 .产品 宣传 型 .网 上 营销 型 、 客 户 服务 型 、 
电子 商务 型 等 。 

(3) 根据 网 站 功能 ,确定 网 站 应 达到 的 目的 。 

(4) 企业 内 部 网 (intranet) 的 建设 情况 和 网 站 的 可 扩展 性 。 


3. 网 站 内 容 规划 


(1) 根据 网 站 的 目的 确定 网 站 的 结构 导航 。 一 般 企业 型 网 站 应 包括 公司 简介 ,企业 
动态 、 产 品 介绍 、 客 户 服务 、 联 系 方式 ,在线 留 言 等 基本 内 容 , 更 多 内 容 如 常见 问题 ,营销 
网 络 ,招贤 纳 士 \ 在 线 论 坛 .英文 版 等 等 。 

(2) 根据 网 站 的 目的 及 内 容 确定 网 站 整合 功能 。 如 FLASH 引导 页 ,会员 系统 、 网 上 
购物 系统 、 在 线 支付 .问卷 调查 系统 、 信 息 搜索 查询 系统 、 流 量 统计 系统 等 。 

(3) 确定 网 站 的 结构 导航 中 的 每 个 频道 的 子 栏目 。 如 公司 简介 中 可 以 包括 总 裁 致 
词 发 展 历程 .企业 文化 ,核心 优势 .生产 基 地 、 科 技 研发 .合作 伙伴 、 主 要 客户 客户 评价 
等 ;客户 服务 可 以 包括 服务 热线 .服务 宗旨 、 服 务 项 目 等 。 

(4) 确定 网 站 内 容 的 实现 方式 。 如 产品 中 心 使 用 动态 页 面 还 是 静态 页 面 ,营销 网 络 
是 采用 列表 方式 还 是 地 图 方式 展示 。 
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4. 网 站 技术 解决 方案 


(1) 确定 建站 是 采用 自 建 服务 器 ,还 是 租用 虚拟 主机 。 

(2) 选择 操作 系统 ,用 Windows Server 还 是 UNIX 、Linux。 分 析 投 入 成 本 ,功能 、 开 
发 ,稳定 性 和 安全 性 等 。 

(3) 确定 是 采用 现成 的 企业 上 网 方案 ,电子 商务 解决 方案 ,还 是 自己 开发 。 

(4) 网 站 安全 性 措施 , 防 人 侵 、 防 病毒 方案 等 。 

(5) 选择 什么 样 的 动态 程序 开发 语言 及 相应 的 数据 库 。 程 序 如 ASP、JSP、PHP、 
ASP. NET, 数 据 库 如 SQL Server、Access、Oracle 等 。 


5. 网 页 设计 

(1) 网 页 美术 设计 要 求 。 网 页 美术 设计 一 般 要 与 企业 整体 形象 一 致 ,要 符合 企业 规 
范 , 要 注意 网 页 色彩 、 图 片 的 应 用 及 版 面 策划 ,保持 网 页 的 整体 一 致 性 。 

(2) 在 新 技术 的 采用 上 要 考虑 主要 目标 访问 群体 的 分 布地 域 . 年 龄 阶层 .网 络 速度 、 
阅读 习惯 等 。 

(3) 制订 网 页 改版 计划 ,如 半年 到 一 年 时 间 进 行 较 大 规模 改版 等 。 


6. 网 站 测试 


(1) 文字 ,图片 是 否 有 错误 。 

(2) 程序 及 数据 库 测试 。 

(3) 链接 是 否 有 错误 。 

(4) 服务 器 稳定 性 、 安 全 性 。 

(5) 网 页 兼容 性 测试 ,如 浏览 器 .显示 器 等 。 


7. 网 站 维护 


(1) 网 站 内 容 的 更 新 .调整 等 。 

(2) 服务 器 及 相关 软 硬 件 的 维护 ,对 可 能 出 现 的 问题 进行 评估 ,制定 响应 时 间 。 

(3) 数据 库 维护 。 有 效 地 利用 数据 是 网 站 维护 的 重要 内 容 , 因 此 数据 库 的 维护 要 受 
到 重视 。 


8. 网 站 发 布 与 推广 


(1) 网 站 测试 后 进行 发 布 的 公关 ,广告 活动 。 
(2) 搜索 引擎 登记 等 。 


9. 网 站 设计 日 程 表 
网 站 设计 日 程 表 包 括 各 项 规划 任务 的 开始 时 间 、 完 成 时 间 、 负 责 人 等 内 容 。 
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10. 费用 明细 


需要 详细 列 出 所 需 各 项 费用 的 清单 ,估算 出 总 的 投资 额度 。 
以 上 为 网 站 策划 中 的 主要 内 容 , 根 据 不 同 的 需求 和 建站 目的 ,内 容 也 会 有 所 增加 或 
减少 。 在 建设 网 站 之 初 ,一 定 要 进行 细致 的 策划 ,才能 达到 预期 建站 目的 。 


1.3.2 实例: 撰写 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 策划 书 


1. 福娃 简介 


福娃 是 北京 2008 年 第 29 届 奥 运 会 吉祥 物 ,其 色彩 与 灵感 来 源 于 奥林匹克 五 环 .来 
源 于 中 国 辽 阔 的 山川 大 地 、 江 河 湖 海 和 人 们 喜爱 的 动物 形象 。 福 娃 是 五 个 可 爱 的 亲密 小 
伙伴 ,他们 的 造型 融 人 了 鱼 , 大 熊猫. 藏 羚羊 .燕子 以 及 奥林匹克 圣火 的 形象 。 每 个 娃娃 
都 有 一 个 朗朗 上 口 的 名 字 : 贝 贝 "“ 晶 晶 "“ 欢 欢 "“ 迎 迎 ” 和 "* 妮 妮 ”。 在 中 国 ,和 登 音 名 字 
是 对 孩子 表达 喜爱 的 一 种 传统 方式 , 当 把 五 个 娃娃 的 名 字 连 在 一 起 ,你 会 读 出 北京 对 世 
界 的 盛情 邀请 “北京 欢迎 您 ”。 


2. 需求 分 析 


目前 ,福娃 的 宣传 形式 有 很 多 种 ,而 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 开发 , 正 是 以 
用 户 自 己 的 方式 向 祖国 献礼 。 通 过 本 网 站 ,用 户 可 以 向 全 世界 人 民 宣 传 北京 奥运 ,宣传 
中 国文 化 ,向 世界 各 地 的 人 民 传 递 友谊 .和 平 、 积 极 进取 的 精神 和 人 与 自然 和 谐 相处 的 美 
好 愿望 。 


3. 网 站 主题 定位 和 功能 定位 


“北京 奥运 吉祥 物 一 一 福娃 ”网 站 是 一 个 非 营 利 性 的 主题 宣传 网 站 , 它 以 北京 奥运 吉 
祥 物 一 一 福娃 为 形象 ,讲述 了 福娃 的 含义 、 灵 感 、 历 史 以 及 北京 奥运 会 的 相关 新 闻 , 旨 在 
推广 北京 奥运 会 ,推广 福娃 文化 ,使 全 世界 人 民 关 注 福娃 ,关注 北京 奥运 会 ,以 此 向 全 世 
界 人 民 推 广博 大 精深 的 中 国文 化 。 


4. 网 站 内 容 规划 


网 站 名 称 : 北京 奥运 吉祥 物 一 一 福娃 

网 站 语言 : 简体 中 文 

网 站 主题 : 推广 福娃 文化 ,宣传 北京 奥运 会 

网 站 风格 : 网 站 以 深 红色 为 主 色调 ,象征 着 吉祥 喜庆 。 网 站 中 大 量 使 用 了 奥运 会 相 
关 图 标 ,使 主题 鲜明 突出 ,要 点 明确 。 网 站 以 简单 明确 的 语言 和 画面 体现 站 点 的 主题 , 表 
现 网 站 的 个 性 和 情趣 ,突出 网 站 的 特点 。 

1) 栏目 设置 

(1) 福娃 简介 。 

(2) 感受 福娃 : 福娃 外 形 、 福 娃 特点 。 
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(3) 产生 历程 : 灵感 来 源 、 设 计 思 想 .深刻 内 涵 。 

(4) 福娃 动态 : 文字 新 闻 、 图 片 新 闻 。 

(5) 福娃 运动 造型 。 

(6) 历届 奥运 吉祥 物 。 

(7) 福娃 感言 。 

(8) 调查 问卷 。 

(9) 流量 统计 。 

(10) 奥运 官网 :“ 北 京 奥运 吉祥 物 一 一 福娃 ”网 站 的 结构 图 如 图 1-4 所 示 。 


广 | 福娃 简介 


福娃 外 形 
|-[ 感受 福娃 二 
福娃 特点 


[| ”产生 历程 - 设计 思想 
深刻 内 涵 


文字 新 闻 
福娃 动态 -[ 


浴 玫 一 一 入 蕉 呢 油 净 济 共 


图片 新 闻 
[|_ 福 娃 运 动 造型 8 
站 | 历届 奥运 吉祥 物 
[| ”福娃 感言 
[| ”调查 问卷 
[| 流量 统计 
一 | ”奥运 官网 


图 1-4 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 结构 图 


2) 网 站 功能 模块 

(1) 网 站 新 闻 发 布 系统 。 

网 站 新 闻 发 布 系 统 是 将 网 页 上 的 某 些 需要 经 常 变 动 的 信息 ,如 福娃 简介 ,福娃 动态 
等 信息 集中 管理 ,并 通过 信息 的 某 些 共 性 进行 分 类 ,最 后 系统 化 、 标 准 化 发 布 到 网 站 上 的 
一 种 网 站 应 用 程序 。 

(2) 网 站 留言 管理 系统 。 

网 站 留言 管理 系统 提供 了 在 线 留言 管理 ,删除 留言 内 容 、 留 言 内 容 搜 索 等 功能 ,使 用 
户 可 以 讨论 福娃 的 相关 话题 ,如 福娃 感言 等 。 

(3) 网 站 流量 分 析 系 统 。 

网 站 流量 分 析 系 统 可 以 向 商业 网 站 提供 页 面 访问 计数 、 排 行 和 访问 分 析 服 务 。 可 以 
分 析 网 站 流量 ,对 整个 站 点 乃至 任意 页 面 的 访问 流量 进行 数据 分 析 , 并 对 网 站 分 析 做 出 
完整 的 统计 报告 ,随时 可 以 了 解 网 站 乃至 任意 页 面 的 流量 动向 和 受 欢迎 程度 ,并 以 此 做 
出 相关 调整 策略 。 
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(4) 网 站 调查 问卷 系统 。 
网 站 调查 问卷 系统 主要 是 针对 福娃 的 相关 信息 ,进行 网 上 投票 ,使 决策 者 了 解 福娃 
的 相关 调查 。 
5. 网 站 技术 解决 方案 
“北京 奥运 吉祥 物 一 一 福娃 ”网 站 中 主要 涉及 的 技术 如 表 1-1 所 示 。 
表 1-1 网 站 中 主要 涉及 的 技术 
序号 网 站 组 成 使 用 技术 名 称 效果 说 明 


(1) 福娃 网 站 的 文档 ,包含 标题 文本、 表格 等 内 容 
(2) 通过 超 链 接 检 索 在 线 的 信息 


(1) 网 站 所 有 文字 


1 (3) 为 获取 远程 服务 而 设计 的 表单 等 
(4) 在 文档 中 直接 包含 电子 表格 .视频 剪辑 声音 剪辑 


以 及 其 他 的 一 些 应 用 


(1) 实现 在 一 个 Web 页 面 中 链接 多 个 对 象 
JavaScript (2) 与 Web 客户 交互 作用 ,从 而 可 以 开发 客户 端的 应 
用 程序 等 


使 用 CSS 的 技术 ,网 页 便 会 给 人 一 种 赏心悦目 . 工 工整 

整 的 感觉 ,同时 字体 的 色彩 变化 也 使 主页 变 得 更 加 生 

动 活泼 

(1) 完善 的 客户 数据 资料 处 理 

(2) 快速 的 资料 查询 能 力 

(1) ASP 的 运行 速度 快 ,而 且 它 为 使 用 HTML 脚本 和 
ActiveX 服务 器 组 件 构建 Web 应 用 程序 提供 了 一 
个 框架 。 可 以 通过 将 脚本 嵌入 HTML 页 内 来 创建 
ASP 文档 。 当 用 户 请 求 得 到 一 个 ASP 时 ,服务 器 
便 执行 嵌入 在 页 内 的 脚本 ,而且 将 脚本 的 输出 作为 


(1) 网 站 动态 菜单 
(2) 动态 图 标 


3 | 网 站 的 页 面 风格 


(1) 福娃 资料 
(2) 福娃 新 闻 


Access 数据 库 


(1) 经常 更 新 的 


网 页 HTML 的 组 成 部 分 也 包括 在 内 ,从 而 任何 浏览 器 
5 |(2) 动态 数据 ,如 都 可 以 浏览 这 个 网 页 

福娃 动态 、 福 (2) 可 以 和 HTML 或 其 他 脚本 语言 ( VBScript、 
娃 感 言 等 JavaScript) 相 互 谋 套 

(3) 是 一 种 在 Web 服务 器 端 运行 的 脚本 语言 ,程序 代 

码 安 全 保密 
(4) 可 以 使 用 ActiveX 控件 继续 扩充 其 功能 
(5) 可 以 轻松 地 存 取 各 种 数据 库 , 适 用 于 各 种 浏览 器 
(1) 主要 动画 (1) 以 极 富 吸引 力 的 动画 吸引 浏览 者 停留 


(2) 动态 图 标 (2) 增强 网 站 感染 力 


6. 网 页 设计 


首页 的 设计 

对 于 一 个 网 站 来 说 ,首页 是 至 关 重 要 的 ,首页 的 好 坏 ,可 以 直接 影响 浏览 者 的 情绪 。 
设计 首页 首先 需要 绘制 一 张 草图 ,草图 应 包括 网 站 的 标志 、 广 告 条 、 菜 单 栏 和 友情 链接 等 
一 些 基 本 的 部 件 。 设 计 者 根据 部 件 的 重要 性 合理 地 布置 部 件 的 位 置 ,图 1-5 为 “北京 奥运 
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吉祥 物 一 一 福娃 ”网 站 的 首页 草图 。 
首页 的 草图 设计 好 之 后 ,就 可 以 使 用 设计 工具 制作 首页 了 。 
Logo 区 
网 站 导航 区 
网 站 Banner 
图 片 新 闻 区 福娃 动态 公告 栏 
福娃 简介 (图 片 ) 福娃 揭秘 


精彩 图 片 名 人 说 福娃 | 投票 调查 


版 权 区 
1-5 “北京 奥运 吉祥 物 一 一 福娃 ”首页 草图 


7. 网 站 测试 


测试 网 站 主要 包括 功能 测试 浏览 器 兼容 性 测试 和 超 链 接 测 试 。 

功能 测试 就 是 测试 者 根据 用 户 的 目标 功能 要 求 , 管 理 方式 、 使 用 习惯 等 ,对 网 站 的 
功能 一 一 进行 测试 ,测试 用 户 需要 的 功能 是 否 都 已 实现 。 请 用 户 试 使 用 ,发 现 系统 设计 
中 隐藏 的 错误 和 缺陷 ,提出 后 开发 者 应 予以 改进 , 尽 可 能 满足 用 户 的 功能 需求 。 

浏览 器 兼容 性 测试 就 是 根据 不 同 的 用 户 使 用 不 同 的 浏览 器 的 习惯 , 找 出 各 个 浏览 器 
对 各 种 脚本 语言 的 解释 存在 的 差异 ,以 保证 页 面 的 兼容 性 及 显示 的 一 致 性 ,满足 大 多 数 
用 户 的 需要 。 在 测试 中 ,应 尽 可 能 地 使 用 多 种 版 本 的 浏览 器 来 测试 网 页 ,最 好 使 用 大 多 
数 用 户 常用 的 浏览 器 版 本 ,尽量 不 要 使 用 最 新 版 本 的 浏览 器 进行 测试 ,因为 许多 高 版 本 
中 能 显示 的 效果 ,在 低 版 本 中 不 一 定 能 够 实现 。 

超 链接 测试 就 是 测试 网 站 中 各 个 超 链接 的 可 用 性 、 正 确 性 ,使 浏览 者 通过 超 链接 能 
够 顺利 地 访问 目标 页 面 。 


8. 网 站 维护 


(1) 随时 更 新 网 页 内 容 及 网 站 栏目 。 

(2) 每 三 个 月 对 服务 器 进行 一 次 维护 。 

(3) 在 维护 期 内 ,对 于 系统 运行 过 程 中 出 现 的 问题 尽快 解决 ,尤其 是 对 服务 器 及 相关 
软 硬 件 的 维护 ,响应 时 间 如 下 : 造成 整个 系统 瘫痪 的 故障 ,2 小 时 响应 ,24 小 时 内 解决 ; 严 
重 影响 系统 运行 的 故障 ,2 小 时 响应 ,48 小 时 内 解决 ;影响 系统 的 效率 ,但 系统 仍然 可 以 
运行 的 故障 ,2 小 时 响应 ,一 周 内 解决 ; 因 软 件 升级 ,系统 上 一 些 功 能 未 实现 的 故障 ,一 月 
内 解决 。 
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9. 网 站 推广 


1) 通过 搜索 引擎 推广 网 站 

网 站 做 好 后 ,就 去 中 文雅 虎 、 百 度 、 谷 歌 等 网 站 上 进行 搜索 引擎 登记 ,让 更 多 检索 、 查 
找 同 行业 的 人 查找 到 用 户 的 网 站 。 

2) 利用 自己 的 网 站 推广 自己 的 网 站 

网 站 建 好 后 ,不 断 更 新 自己 的 网 站 内 容 ,这 样 会 给 访问 者 留 下 好 的 印象 ,增加 回头 
率 ;把 自己 的 促销 广告 做 到 网 上 ,让 客户 产生 访问 兴趣 。 

3) 利用 其 他 网 站 推广 自己 的 网 站 

与 相关 网 站 交换 首页 广告 .友情 链接 ,在 全 国 各 大 能 发 布 信息 、 广 告 、 留 言及 论坛 的 
网 站 上 发 布 广告 信息 。 

4) 利用 传统 媒体 推广 网 站 

适当 在 报刊 电台、 路 牌 等 传统 媒体 上 发 布 网 站 广告 ,结合 促销 活动 做 一 些 街道 横幅 
广告 促销 网 站 ,还 可 将 网 址 印刷 在 用 户 公 司 的 信 短 .信封 ` 名 片 等 宣传 资料 上 ,让 更 多 的 
人 了 解 用 户 的 网 站 。 

通过 上 面 的 宣传 和 推广 ,用 户 就 可 以 提高 网 站 的 访问 率 , 访 问 率 越 高 ,了 解 用 户 网 站 
的 人 就 会 越 多 。 


10. 网 站 设计 日 程 表 
表 1-2 所 示 为 网 站 设计 的 日 程 表 。 
表 1-2 网 站 设计 日 程 表 


进 程 第 一 周 | 第 二 周 | 第 三 周 | 第 四 周 | 第 五 周 | 第 六 周 | 第 七 周 参 与 人 
提交 方案 书 [Eee 网 站 规划 人 员 
项 目 开 发 网 站 开发 人 员 
竣工 验收 下 网 站 测试 人 员 、 客 户 
网 站 维护 网 站 维护 人 员 


1.4 网 下 开发 相关 软件 介绍 


“ 工 欲 善 其 事 , 必 先 利 其 器 ” ,制作 网 页 的 第 一 件 事 就 是 选择 一 种 网 页 制作 软件 。 从 
原理 上 讲 ,虽然 直接 用 记事 本 也 能 写 出 网 页 ,但 是 要 求 网 页 制作 者 必须 熟练 掌握 HTML、 
CSS、ASP 等 语言 ,而 且 效 率 很 低 。 如 果 想 要 高 效 地 进行 网 站 开发 ,用 户 应 该 选择 一 些 合 
适 的 网 站 开发 工具 。 
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1.4.1 网 页 编辑 软件 


随 着 互联 网 的 普及 , HTML 技术 的 不 断 发 展 和 完善 , 随 之 而 产生 了 众多 网 页 编辑 
器 。 网 页 编辑 器 基本 上 可 以 分 为 “所 见 即 所 得 ”网 页 编辑 器 和 “ 非 所 见 即 所 得 ”网 页 编辑 
器 两 类 ,二 者 各 有 千秋 。 

“所 见 即 所 得 ”网 页 编辑 器 的 优点 是 直观 使 用 方便 、 容 易 上 手 ,但 它 同 时 存在 难以 精 
确 达到 与 浏览 器 完全 一 致 的 显示 效果 的 缺点 。“ 非 所 见 即 所 得 ?的 网 页 编辑 器 就 不 存在 
这 个 问题 ,因为 所 有 的 HTML 代码 都 是 在 用 户 的 监控 下 产生 的 ,但 是 它 的 工作 效率 
太 低 。 


1. Adobe Dreamweaver 


Adobe Dreamweaver 是 由 Adobe 公司 在 并 购 Macromedia 之 后 推出 的 版 本 , 它 是 一 
款 专 业 的 Web 站 点 开发 软件 ,可 用 于 Web 站 点 ,Web 页 和 Web 应 用 程序 的 设计 编码 和 
开发 工作 。 它 具有 “所 见 即 所 得 ”的 特点 ,能 够 将 各 种 网 页 制作 的 相关 工具 紧密 联系 起 
来 ,同时 ,良好 的 插件 体系 使 Adobe Dreamweaver 可 通过 第 三 方 插件 进行 补充 。 另 外 , 值 
得 称道 的 是 , 它 不 仅 提供 了 强大 的 网 页 编辑 功能 ,而 且 提 供 了 完善 的 站 点 管理 机 制 , 可 以 
说 , 它 是 一 个 集 网 页 创作 和 站 点 管理 两 大 利器 于 一 身 的 制作 工具 。 


2. Office SharePoint Designer 2007 


Microsoft Frontpage 是 比较 流行 的 网 页 制作 软件 之 一 ,后 来 它 随 Office 2007 的 发 行 
而 改名 为 Office SharePoint Designer 2007。 该 软件 具有 “所 见 即 所 得 ”的 特点 , 它 可 以 方 
便 地 进行 文件 夹 管理 ,报表 管理 导航 管理 、 超 链接 管理 等 多 项 管理 功能 。 


3. Visual Studio. NET 


Visual Studio. NET 是 一 套 完整 的 开发 工具 . 它 属 于 “所 见 即 所 得 ”的 网 页 编辑 器 ,用 
于 生成 ASP Web 应 用 程序 .XML Web services、 桌 面 应 用 程序 和 移动 应 用 程序 。Visual 
Basic. NET、Visual C++ .NET、Visual C#.NET 和 VisualJ#.NET 全 都 使 用 相同 的 集 
成 开发 环境 (IDE) ,该 环境 允许 它们 共享 工具 并 有 助 于 创建 混合 语言 解决 方案 。 另 外 ， 
这 些 语 言 利用 了 . NET Framework 的 功能 ,此 框架 提供 对 简化 ASP Web 应 用 程序 和 
XML Web services 开发 的 关键 技术 的 访问 。 


4. EditPlus 


任意 文本 编辑 器 都 可 以 用 于 编写 动态 网 站 应 用 程序 ,最 常用 的 文本 编辑 器 就 是 
Windows 自 带 的 记事 本 。 但 是 记事 本 的 功能 太 少 , 远 远 不 能 满足 程序 编写 的 要 求 。 
EditPlus 是 目前 非常 流行 的 一 款 文 本 编辑 器 ,该 软件 功能 强大 、 易 于 使 用 .兼容 性 强 , 支 
持 几 乎 所 有 程序 语言 的 代码 彩色 显示 。 但 是 . 它 是 一 款 “ 非 所 见 即 所 得 ”的 网 页 编辑 器 。 
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1.4.2 图 像 处 理 软件 


1. Adobe Photoshop 


Adobe Photoshop 是 Adobe 公司 推出 的 功能 强大 的 平面 图 像 处 理 软件 ,也 是 迄今 为 
止 世界 上 最 畅销 的 图 像 编 辑 软件 。Adobe Photoshop 无 论 从 性 能 的 优越 还 是 使 用 的 方便 
等 方面 ,都 给 人 以 耳目 一 新 的 感觉 。 由 于 Photoshop 在 图 像 编 辑 、 桌 面 出 版 .广告 设计 、 
婚纱 摄影 等 各 行 各 业 中 广泛 应 用 , 它 已 成 为 许多 涉及 图 像 处 理 的 行业 的 实施 标准 。 


2. Adobe Fireworks 


Adobe Fireworks 是 用 来 设计 和 制作 专业 化 网 页 图 形 的 工具 。 作 为 一 个 图 像 处 理 软 
件 ,Fireworks 能 够 自由 地 导入 多 种 格式 的 图 像 进 行 处 理 。 使 用 Fireworks 可 以 在 一 个 
专业 化 的 环境 中 创建 和 编辑 网 页 图 形 、 对 其 进行 动画 处 理 、 添 加 高 级 交互 功能 以 及 优化 
图 像 。 


1.4.3 动画 制作 软件 


1. Adobe Flash 


Adobe Flash 是 Adobe 公司 收购 Macromedia 公司 后 将 享誉 盛名 的 Macromedia 
Flash 更 名 为 Adobe Flash 后 的 一 款 优秀 的 动画 软件 。 它 是 一 种 交互 式 动画 设计 工具 ， 
用 它 可 以 将 音乐 ,声效 .动画 以 及 富有 新 意 的 界面 融合 在 一 起 ,以 制作 出 高 品质 的 网 页 动 
态 效 果 。 它 主要 应 用 于 网 页 设计 和 多 媒体 创作 等 领域 ,功能 十 分 强大 和 独特 ,已 成 为 交 
互 式 矢量 动画 的 标准 ,在 网 上 非常 流行 。Flash 广泛 应 用 于 网 页 动画 制作 教学 动画 演 
示 、 网 上 购物 .在线 游戏 等 的 制作 中 。 


2. Ulead GIF Animator 


Ulead GIF Animator 是 友 立 公司 出 版 的 GIF 动画 制作 软件 ,内 建 的 Plugin 有 许多 
现成 的 特效 可 以 立即 套用 ,可 将 AVI 文件 转 成 GIF 动画 文件 .而 且 还 能 将 GIF 动画 图 片 
最 佳 化 ,能 将 网 页 上 的 GIF 动画 图 片 “减肥 ”, 以 便 让 人 能 够 更 快速 地 浏览 网 页 。 它 是 一 
个 简单 ,快速 .灵活 ,功能 强大 的 GIF 动画 编辑 软件 。 同 时 ,也 是 一 款 不 错 的 网 页 设计 辅 
助 工具 ,还 可 以 作为 Photoshop 的 插件 使 用 ,丰富 而 强大 的 内 置 动画 选项 ,让 用 户 更 方便 
地 制作 符合 要 求 的 GIF 动画 。 


1.4.4 网 站 发 布 软件 


1. CuteFTP 


CuteFTP 是 一 个 基于 Windows 的 文件 传送 协议 (FTP) 的 客户 端 程序 ,通过 它 用 户 
无 须知 道 协 议 本 身 的 具体 细节 ,就 可 充分 利用 FTP 的 强大 功能 。CuteFTP 通过 易于 用 
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户 使 用 的 Windows 界面 ,避免 使 用 麻烦 的 命令 行 工 具 , 大 大 简化 了 FTP 的 操作 。 即 便 是 
入 门 级 的 个 人 电脑 用 户 ,也 可 以 轻松 利用 CuteFTP 在 全 球 范围 内 的 远程 FTP 服务 器 和 
个 人 电脑 之 间 上 传 、 下 载 及 编辑 文件 。 


2. FlashFXP 


FlashFXP 是 一 个 功能 强大 的 FXP/FTP 软件 ,融合 其 他 优秀 FTP 软件 的 优点 ,例如 
像 CuteFTP 一 样 可 以 比较 文件 夹 ,支持 彩色 文字 显示 ;支持 子 文件 夹 的 文件 传送 、 删 除 ; 
支持 上 传 、 下 载 及 文件 续 传 ;可 以 跳 过 指定 的 文件 类 型 ,只 传送 需要 的 文件 ;可 以 自 定义 
不 同类 型 文件 的 显示 颜色 ;可 以 缓存 远 端 文件 夹 列表 ,支持 FTP 代理 ;具有 避免 空闲 功 
能 ,防止 被 站 点 踢 出 ;可 以 显示 或 隐藏 “隐藏 * 属 性 的 文件 ,文件 夹 ;支持 每 个 站 点 使 用 被 


1.5 本 章 小 结 


本 章 首 先 介 绍 与 网 站 相关 的 基本 知识 ,使 读者 了 解 了 什么 是 网 页 ,什么 是 网 站 ,网 站 
和 网 页 的 几 种 常见 类 型 ,在 学 习 网 站 开发 与 网 页 设计 之 前 能 够 对 网 站 知识 有 一 个 深入 的 
理解 和 体会 。 

其 次 ,本 章 详细 介绍 了 网 站 开发 的 整个 流程 。 随 着 网 站 开发 技术 的 不 断 更 新 ,网 站 
的 设计 和 开发 越 来 越 像 一 个 软件 工程 ,网 站 的 设计 和 开发 已 经 进入 了 一 个 需要 强调 流程 
和 分 工 的 时 代 , 因 此 只 有 建立 规范 的 有 效 的 ,健全 的 开发 机 制 ,才能 适应 用 户 不 断 变化 
的 需求 ,达到 预期 的 开发 目标 。 

再 次 ,本 章 以 “北京 奥运 会 吉祥 物 一 一 福娃 "网 站 为 实例 ,讲述 了 网 站 策划 书 的 设计 
与 撰写 ,根据 不 同 的 需求 和 建站 目的 ,内 容 可 以 随 之 增加 或 者 减少 。 

最 后 ,本 章 从 网 页 编辑 、 图 像 处 理 、 动 画 制作 、 网 站 发 布 四 个 方面 介绍 了 目前 网 站 开 
发 和 网 页 设计 的 主流 工具 软件 ,让 读者 能 够 轻松 选择 合适 的 开发 工具 ,提高 网 站 的 开发 


1.6 马 题 


是 网 站 的 基本 信息 单元 。 
网 页 是 用 语言 编写 的 。 
. 根据 网 页 的 表现 形式 ,网 页 可 分 为 和 两 类 。 
. 静态 网 页 文件 一 般 都 是 以 等 形式 作为 文件 名 的 


上 请 mm 己 玫 


5. 动态 网 页 是 指 的 网 页 。 
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二 、 简 答 及 实 训 题 


. 网 页 的 基本 元 素 有 哪些 ? 

. 上 网 查询 网 站 项 目 开发 的 常用 软件 。 

. 结合 本 书 上 网 查询 常用 的 网 站 开发 语言 或 技术 ,并 了 解 其 发 展 趋势 。 

. 上 网 查询 关于 网 站 项 目 开 发 方面 的 资料 ,概括 企业 网 站 项 目 开发 的 流程 。 

. 上 网 查看 著名 网 络 公司 的 网 站 项 目 开发 方案 书 , 根 据 自己 的 兴趣 爱好 ,确定 一 个 
主题 ,学 习 编写 自己 的 网 站 策划 书 。 


an ww 
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章 
网 站 开发 环境 的 搭建 


随 着 Web 技术 的 快速 发 展 , 各 类 网 站 开发 技术 层出不穷 。 作 为 一 名 网 站 开发 者 , 首 
先 应 该 选择 合理 的 开发 工具 ,搭建 适当 的 网 站 开发 环境 ,以 便 在 网 站 开发 过 程 中 的 管理 
和 测试 。 本 章 主 要 讲述 使 用 Adobe Dreamweaver CS3 建立 站 点 、 管 理 站 点 、 操 作 基 本 的 
网 页 文档 以 及 架设 和 配置 IIS(Internet Information Services ,互联 网 信息 服务 ) 服 务 器 的 
方法 和 技巧 。 


2.1 Dreamweaver CS3 简介 


Adobe Dreamweaver CS3 是 Adobe 公司 在 并 购 Macromedia 之 后 推出 的 一 款 新 版 
本 的 专业 的 Web 站 点 开发 软件 ,可 用 于 Web 站 点 、Web 页 和 Web 应 用 程序 的 设计 、 编 码 
和 开发 工作 。 

Dreamweaver 与 Fireworks、Flash 合 称 为 网 站 制作 “三 剑客 ”, 它 具有 “所 见 即 所 得 ” 
的 特点 ,能 够 将 各 种 网 页 制作 的 相关 工具 紧密 联系 起 来 ,同时 拥有 良好 的 插件 体系 ,使 
Adobe Dreamweaver CS3 可 通过 第 三 方 插件 进行 功能 的 补充 和 扩展 。 另 外 ,值得 称道 的 
是 , 它 不 仅 提供 了 强大 的 网 页 编辑 功能 ,而 且 提 供 了 完善 的 站 点 管理 机 制 ,可 以 说 它 是 一 
个 集 网 页 创作 和 站 点 管理 两 大 利器 于 一 身 的 创造 工具 。 

相对 于 以 前 的 版 本 ,Adobe Dreamweaver CS3 的 功能 主要 在 以 下 方面 进行 了 增强 : 


1. 对 AJAX 的 支持 


Adobe Dreamweaver CS3 对 AJAX 支持 的 增强 顺应 了 AJAX 的 热潮 .AJAX 的 全 称 
是 Asynchronous JavaScript and XML( 异 步 JavaScript 和 XML) , 它 并 不 是 一 种 全 新 的 
技术 ,而 是 多 种 成 熟 技术 的 集合 应 用 。 它 的 基础 还 是 HTML 或 者 XHTML, 使 用 
JavaScript 脚本 进行 操作 ,通过 XML 与 其 他 应 用 程序 进行 通信 。 


2. 与 Adobe Photoshop 的 关联 增强 


Photoshop 是 Adobe 公司 推出 的 专门 用 于 图 形 、 图 像 处 理 的 软件 ,收购 了 
Macromedia 之 后 , Adobe 也 增强 了 Photoshop CS3 与 Dreamweaver CS3 之 间 的 联系 。 
在 Dreamweaver CS3 中 双击 图 形 、 图 像 文 件 , 即 可 打开 Photoshop CS3 进行 编辑 ,也 可 以 
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将 Photoshop CS3 中 设计 的 图 形 .图 像 文件 直接 引入 Dreamweaver CS3 中 。 
3. 对 浏览 器 兼容 性 的 检查 


多 种 浏览 器 并 存 的 现状 给 Web 开发 人 员 增 加 了 很 多 额外 的 工作 量 , 有 些 Web 页 面 
在 IE 下 看 到 的 效果 令 人 非常 满意 ,但 是 在 其 他 浏览 器 (例如 Mozilla Firefox) 中 看 起 来 却 
是 面目 全 非 。Adobe Dreamweaver CS3 提供 了 对 Firefox、Internet Explorer (Windows) 
6.0 和 7.0 ,Internet Explorer (Macintosh) 5. 2、Netscape Navigator 8. 0 .Opera 8.0 和 
9.0、Safari 2.0 这 些 浏览 器 相关 CSS 的 兼容 性 检测 。 


4. CSS 相关 功能 的 增强 


Adobe Dreamweaver CS3 提供 了 大 量 的 CSS 模板 与 代码 块 ,开发 人 员 可 以 依据 这 些 
模板 和 代码 块 快速 建立 基于 CSS 修饰 的 页 面 。 同 时 Dreamweaver CS3 对 CSS 的 管理 也 
进行 了 增强 ,可 以 方便 地 将 CSS 代码 在 外 部 文档 与 页 面 之 间 进行 移动 。 


5. 与 Adobe Device Central CS3、Adobe Bridge CS3 的 关联 


Device Central CS3 是 用 来 制作 各 种 手机 和 消费 类 电子 产品 上 的 内 容 , Bridge CS3 
是 一 款 功能 强大 的 媒体 管理 器 ,这 两 款 专 用 软件 与 Dreamweaver CS3 的 关联 ,为 开发 人 
员 创 建功 能 丰富 的 Web 应 用 程序 提供 了 便利 。 


2.2 Dreamweaver CS3 的 工作 了 寄 面 


2.2.1 启动 Dreamweaver CS3 


正常 安装 好 Dreamweaver CS3 之 后 ,选择 “开始 "一 “所 有 程序 ”一 Adobe 
Dreamweaver CS3 命令 ,Dreamweaver CS3 经 过 一 系列 初始 化 过 程 后 ,首先 显示 “工作 区 
设置 ”对话 框 ,由 于 要 采用 可 视 化 方式 设计 网 页 ,选择 “设计 者 ”" 单 选 按 钮 , 单 击 “ 确 定 ” 按 
钮 进入 起 始 页 对 话 框 ,如 图 2-1 所 示 。 在 此 对 话 框 中 可 以 在 “打开 最 近 的 项 目 ”“ 新 建 ”、 
“从 模板 创建 " 栏 中 进行 相应 选择 。 

如 果 要 创建 新 的 静态 网 页 , 则 选择 “新 建 ” 栏 中 的 “HTML” 选 项 ,进入 Dreamweaver 
CS3 的 工作 区 主 窗口 。 


2.2.2 工作 区 集成 窗口 


在 Windows 中 ,Dreamweaver CS3 提供 了 一 个 将 全 部 元 素 置 于 一 个 窗口 的 集成 布 
局 。 在 集成 的 工作 区 中 ,全 部 窗口 和 面板 都 被 集成 到 一 个 更 大 的 应 用 程序 窗口 中 ,如 
图 2-2 所 示 。 


1. 插入 工具 栏 
Dreamweaver CS3 的 “插入 工具 栏 ” 包 括 常 用 、 布 局 .表单 .数据 、Spry、 文 本 、 收 藏 夹 
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打开 最 近 的 项 目 新 建 
[= 简 HTML 则 css 禁 式 表 
由 coldFusion 各 所 
条 PHP 条 起 站 页 (主题 ) 
生 AsP vBseript 而 起 站 页 (基本 ) 
由 xsSLT( 吾 页 ) Ds. 
由 css 
自 Javaserpt 扩展 
矢 xmL @ Dreamweaver Exchange » 
而 Dreamweaver 站 点 
Os. 
国 全 二 和 ITw Adobe® Creative Suite® 4 
国 交 贡 论 > Dw 本 让 和 ， 
国 夫 过 > 设计 领域 尽情 挥 酒 创意, 
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2-1 起 始 页 对 话 框 
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图 2-2 Dreamweaver CS3 工作 区 


七 个 类 别 ,每 个 类 别 又 包括 许多 功能 按钮 ,如 图 2-3 所 示 。 用 户 选 择 不 同 的 分 类 ,插入 工 
具 栏 中 包含 的 功能 按钮 也 随 之 改变 。 当 鼠标 悬浮 在 功能 图 标 上 时 会 出 现 提 示 文 字 , 提示 
该 按钮 的 功能 。 


两 
妃 回 昌国 轩 国 . 击 - 闫 晶 四 属 . 忆 -| 图 - 晤 


图 2-3 插入 工具 栏 


2. 文档 工具 栏 
“文档 工具 栏 ” 中 的 按钮 可 以 使 用 户 在 文档 的 不 同 视图 之 间 快 速 切换 :“ 显 示 代 码 视 
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图 ”“ 显 示 设计 视图 ”“ 显 示 代 码 和 设计 视图 ”。“ 文 档 工 具 栏 ”中 还 包括 一 些 与 查看 文 
档 、 在 本 地 和 远程 站 点 间 传 输 文档 有 关 的 常用 命令 和 选项 ,如 图 2-4 所 示 。 


显示 代码 视图 显示 设计 视图 Wa 验证 标记 
@. | bp 局 村 K 面 | 
显示 代码 和 设计 视图 文档 标题 视图 选项 检查 浏览 器 兼容 性 
刷新 设计 视图 
在 浏览 器 中 预览 /调试 


2-4 文档 工具 栏 


“显示 代码 视图 ” 仅 在 “文档 窗口 "中 显示 页 面 的 代码 ,适合 进行 代码 的 直接 编写 ,如 
图 2-5 所 示 。 


I Th TI tran eionn TENY Perp:/ /em ws- rg/ TR rn/ ID/ wp eranei ri on dd 
/yw v3 org/1988/ hrml "> 


wetp-eqaly="Content-TYype” content="test/heal; charaet=utf-0” /> 
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二 TEL 
图 2-5 显示 代码 视图 


“显示 代码 视图 和 设计 视图 ”在 “文档 窗口 ”的 一 部 分 中 显示 “代码 "视图 ,而 在 另 一 部 
分 中 显示 “设计 ”视图 ,如 图 2-6 所 示 。 
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图 2-6 显示 代码 视图 和 设计 视图 
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“显示 设计 视图 ” 仅 在 “文档 窗口 "中 显示 “设计 ”视图 ,如 图 2-7 所 示 。 
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2-7 显示 设计 视图 
3. 文档 窗口 


“文档 窗口 ?显示 用 户 当前 创建 和 编辑 的 文档 , 它 根据 用 户 在 “文档 工具 栏 "中 不 同 的 
选择 而 显示 不 同 的 视图 方式 ,如 图 2-5、 图 2-6 和 图 2-7 所 示 ,用户 可 以 在 这 个 窗口 中 编辑 
页 面 元 素 和 页 面 代码 。 位 于 文档 窗口 底部 的 是 “状态 栏 ”, 它 可 以 帮助 用 户 选择 相应 的 页 
面 元 素 .查看 当前 文档 的 显示 状态 及 下 载 时 间 等 ,如 图 2-8 所 示 。 

hedy>》 Ctable) Ctbody> Ctr> Cd> <table> Ctbodr> Gtr)ta Yaa [ox ~|i09 x M05v lo/ os 本 


2-8 状态 栏 


4. 属性 面板 


Dreamweaver CS3 的 “属性 ”面板 并 不 是 将 所 有 的 属性 加 载 在 面板 上 ,而 是 根据 用 户 
选择 的 对 象 来 动态 显示 对 象 的 属性 。 属 性 面板 的 状态 完全 是 随 当 前 在 文档 中 选择 的 对 
象 来 确定 的 ,如 图 2-9 所 示 。 当 前 选择 了 一 幅 图 像 ,那么 属性 面板 上 就 出 现 该 图 像 的 相关 
属性 。 


江 DD 7 Em | FE 
EE RE 。 ER EY 
[ aaaep |] [ms 国 wa ] 二 计生 
NY DOV rae | tee Iso 到 a 
图 2-9 “属性 ”面板 
5. 组 合 面板 


Dreamweaver 的 三 个 最 重要 功能 是 网 页 设计 、 代 码 编辑 和 应 用 程序 开发 ,根据 这 些 
功能 其 相应 的 面板 也 分 为 设计 类 面板 ,文件 类 面板 .应 用 程序 类 面板 ,用 户 可 以 根据 自己 
的 喜好 合理 分 配 面板 布局 。 
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1) 设计 类 面板 


设计 类 面板 包括 “CSS 样式 ”和 “AP 元 素 ” 两 个 子 面板 ,如 图 2-10 所 示 。“CSS 样式 ” 


面板 用 于 CSS 样式 的 应 用 编辑 操作 ,“AP 元 素 ” 面 板 用 于 定 
位 HTML 页 面 元 素 的 绝对 位 置 。 

2) 文件 类 面板 

文件 类 面板 包括 “文件 ”“ 资 源 ”" 和 “代码 片断 ”三 个 子 面 
板 , 如 图 2-11 所 示 。 

在 “文件 ”面板 中 查看 站 点 、 文 件 或 文件 夹 时 ,可 以 更 改 
查看 区 域 的 大 小 ,还 可 以 展开 或 折 秋 “文件 ”面板 。 当 “文件 ” 
面板 折 且 时 , 它 以 文件 列表 的 形式 显示 本 地 站 点 、 远 程 站 点 
或 测试 服务 器 的 内 容 。 单 击 * 展 示 以 显示 本 地 和 远 端 站 点 ” 
按钮 图 .将 以 窗口 的 形式 展开 ”文件 "面板 ,并 且 以 左右 分 屏 
的 样式 以 树 形 结构 分 别 显示 本 地 站 点 和 远程 站 点 中 的 资源 。 
“文件 ?面板 还 可 以 显示 本 地 站 点 的 视觉 站 点 地 图 。 
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font-size 12px 

text-decoration none 


关于 "line-height” I 加 
加 line-height 在 indexl.htn 的 
的 属性 


es 
[人 色 及 少 可 
图 2-10 设计 类 面板 


“资源 ”面板 可 以 管理 当前 站 点 中 的 资源 ,用 来 显示 与 “文档 窗口 ”中 的 活动 文档 相关 


联 的 站 点 的 资源 。 


“代码 片断 ”面板 中 提供 了 许多 代码 片断 ,分 类 很 清晰 ,用 户 可 以 非常 方便 地 插入 需 


要 的 代码 片断 ,提高 开发 效率 。 
3) 应 用 程序 类 面板 


应 用 程序 类 面板 包括 “数据 库 ”“ 绑 定 ”“ 服 务 器 行为 "和 “组 件 ” 四 个 子 面板 ,如 图 2-12 
所 示 。 使 用 这 些 面 板 , 可 以 连接 数据 库 、 读 取 记录 集 ,为 网 站 的 开发 及 实现 数据 库 操作 等 
提供 了 强大 的 支持 ,使 用 户 能 够 轻松 地 创建 动态 Web 应 用 程序 。 


人 焉 天 | 代码 片断 
加 站 点 辐 [ 志 tm 上 国 


BR 


了 尘 定 | 服务 器 行为 | 组件 


是 国 固 口 El: mL 
二 Ainin_all_articl. 3 若 要 在 该 页 面 上 使 用 
二 hdnin Announee asp ， v : 全 为了 站 上， 
司 Atnin BackData asp 选择 一 种 文档 类 型 。 
二 Ainin leftaalt asp 设置 站 点 的 测试 服务器。 
坪 adnin_dorn asp 4 
二 Adnin_Edit. asp 田 
hdnin CnheisorT EE 
E> rel 图 | 
二 天 [LE 志 __). 
图 2-11 文件 类 面板 图 2-12 应 用 程序 类 面板 


2.3 咎 点 的 基本 操作 


在 制作 网 页 之 前 的 必要 工作 是 创建 站 点 ,利用 站 点 的 管理 功能 对 站 点 中 的 文件 进行 
管理 或 测试 。Dreamweaver CS3 提供 了 本 地 站 点 、 远 程 站 点 和 测试 站 点 三 类 站 点 。 用 户 
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可 以 通过 本 地 站 点 和 远程 站 点 在 本 地 磁盘 和 Web 服务 器 之 间 传 输 文件 ,测试 站 点 则 可 
用 于 对 动态 站 点 的 测试 。 

Web 站 点 是 所 有 文件 和 资源 的 集合 ,站 点 创建 好 之 后 ,用 户 可 以 在 计算 机 上 创建 网 
页 ,并 把 网 页 上 传 到 Web 服务 器 ,同时 可 以 随时 在 Web 服务 器 上 进行 维护 工作 。 


2.3.1 新 建站 点 


规划 好 站 点 结构 后 ,应 该 先 在 Dreamweaver 中 定义 一 个 站 点 ,然后 进行 开发 。 建 立 
站 点 的 方法 很 多 ,下 面 通过 “新 建站 点 向 导 ?” 讲 述 建立 一 个 本 地 站 点 的 具体 步 又。 

(1) 首先 打开 ”我 的 电脑 ” ,双击 下 盘 , 打 开 下 盘 , 在 E 盘 中 右 击 弹出 快捷 菜单 ,选择 
“新 建 ”一 "文件 夹 ”命令 建立 文件 夹 ,之 后 将 “新 建文 件 夹 "命名 为 MySite, 如 图 2-13 所 
示 。 当 然 ,文件 夹 的 名 称 可 以 自己 定义 (一 般 情况 下 要 与 网 站 的 名 称 对 应 ), 也 可 以 根据 
需要 在 此 文件 夹 下 建立 相应 的 子 文件 夹 ,用 来 分 门 别 类 地 存放 网 站 中 的 相应 文件 。 


文件 (E) 编辑 (E) 查看 () 收藏 A] 工具 (T) 入 劲 (名 
@ 银 -日 -市 局 攻关 | 国 - 


图 2-13 建立 MySite 文件 夹 


(2) 打开 Dreamweaver CS3, 在 如 图 2-14 所 示 的 “起 始 页 面 ” 中 单 击 
[ 帮 OeamweaeES | .或 者 直接 在 Dreamweaver CS3 的 主 界面 中 选择 “站 点 ”>“ 新 建站 
点 ”菜单 命令 , 则 出 现 如 图 2-15 所 示 的 “新 建站 点 向 导 ” 对 话 框 。 在 “您 打算 为 您 的 站 点 起 
什么 名 字 ?” 文 本 框 中 输入 站 点 的 名 称 , 如 MySite, 在 “您 的 站 点 的 HTTP 地 址 (URL) 是 
什么 ?文本 框 中 输入 站 点 的 网 址 , 若 没有 网 址 , 则 和 暂时 可 以 不 填 。 

(3) 单 击 “ 下 一 步 ?按钮 ,打开 如 图 2-16 所 示 的 “您 是 否 打 算 使 用 服务 器 技术 ?” 对 话 
框 。 如 果 是 制作 静态 网 站 , 则 选择 默认 的 第 一 个 选项 ”和 否 ,我 不 想 使 用 服务 器 技术 。.”, 和 否 
则 需要 选择 “是 ,我 想 使 用 服务 器 技术 .”, 为 简单 起 见 , 在 这 里 我 们 选择 “ 否 , 我 不 想 使 用 
服务 器 技术 。”。 

(4) 单 击 “下 一 步 ?按钮 ,打开 如 图 2-17 所 示 的 对 话 框 。 此 对 话 框 询 问 在 开发 过 程 中 
的 文件 策略 。 一 般 情况 下 都 是 先 把 所 有 的 网 页 制作 好 ,然后 上 传 到 服务 器 发 布 网 站 , 因 
此 选择 “编辑 我 的 计算 机 上 的 本 地 副本 .完成 后 再 上 传 到 服务 器 (推荐 )” 选 项 。 
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OBE”* DREAMWEAVER” C 


打开 最 近 的 项 目 新 建 从 模板 创建 
国 实 稚 indext nm 秆 Hm 生 css 拉 下 
已 打开 入 coldFusion 辣 1EY 和 全 
站 PHP 四 ia 页 ( 主 是 ) 
图 AsP vBseript 向 起 同 页 (基本 ) 
由 xsSLT( 理 页 ) Ds 
入 css 
科 Javaserpt 扩展 
入 xoL 图 Dreamweaver Exchange > 
而 Dreamweaver 让 点 
Ds 
司 RA 和 NT» Adobe® Creative Suite® 4 
sais > 机 几 站 印 双 Tree、 六 本 式 内 容 视 顺 和 区 动 
目 s 设计 领域 尽情 凑 洒 创意 
UL 不 2 示 


2-14 起 始 页 面 


hohe reareare C53 中 国庆 上 是 文件 和 区 件 玖 和合， 它 对 加 于 服务器 上 的 Tob 站 
您 打 复 为 您 的 站 点 起 什么 名 字 ? 

[site 

未- ysite 

您 的 站 点 的 ITTP 地 址 VRL) 是 什么 了 

lhttp:// 

示例 : http;//fwww, nyHost com/aySite 


各 各 训 训 和 和， 全 全 和 开 


Site 的 站 点 定义 为 


您 是 否 打 筑 使 用 服务 器 技术 ， 如 Col 好 usion、ASP .NET、AS?、JSP 或 PHF? 


包车/ 得 不 理 生 用 服务 车 苇 天 。 1 
加 是 ,我 旭 使 用 服务 器 技术 。 CD) 


图 2-16 选择 站 点 类 型 
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MySite 的 站 点 定义 为 


篇 辑 文 件 ,第 3 部 分 


在 开发 过 程 中 ,您 打 算 如 何 使 用 悠 的 文件 了 


加 编辑 我 的 计算 机 上 的 本 地 副本 ， 完 成 后 再 上 传 有 | 服务 器 推荐 》(E) 
〇 使 用 本 地 网 络 直接 在 服务 器 上 进行 编辑 也) 


您 格 把 文件 存储 在 计算 机 上 的 什么 位 置 ? 
[wsite\ 


图 2-17 文件 存储 策略 


在 “您 将 把 文件 存储 在 计算 机 上 的 什么 位 置 "文本 框 中 输入 上 述 所 建立 的 MySite 文 
件 夹 的 路 径 。 值 得 注意 的 是 ,如 果 手 动 输入 的 文件 夹 不 存在 , Dreamweaver CS3 将 自动 
创建 。 

(5) 单 击 * 下 一 步 ?按钮 ,在 “您 如 何 连接 到 远程 服务 器 ?对 话 框 的 下 拉 列 表 选 项 中 选 
择 “ 无 ”, 如 图 2-18 所 示 。 


MySite 的 站 点 定义 为 


加 


共享 文件 


Bi 
大 


图 2-18 连接 远程 服务 器 


(6) 单 击 * 下 一 步 ?按钮 ,对 话 框 将 列 出 之 前 的 相关 设 定 值 ,如 图 2-19 所 示 。 确 认 信 
息 无 误 之 后 单 击 “ 完 成 ”按钮 结束 站 点 信息 的 设置 ,同时 在 “文件 ”面板 中 出 现 MySite 站 
点 相应 信息 ,如 图 2-20 所 示 。 
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MySite 的 站 点 定义 为 


悠 的 站 点 包含 以 下 设置 

本 地 信息 : 〔 将 创建 本 地 根 文件 卖 ? 
站 点 名 称 ; MySite 

本 地 根 文件 夹 : 了 : WiySite\vaaaN 


息 - 
访问 ;我 格 在 以 后 完成 此 设置 。 


访问 ; 我 格 在 以 后 完成 此 设置 。 


可 以 使 用 ' 高 级 ' 选项 卡 对 您 的 站 点 进行 进一步 配置 。 


2-19 设 定 值 列表 


至 此 ,我 们 就 完整 地 新 建 了 一 个 站 点 。 当 然 ,建立 站 点 的 方法 有 很 多 种 ,用 户 根 据 习 
惯 选择 一 种 方法 即 可 。 


i 
EA Fam | 
Bbsite 转 本 地 视图 0 
名 C3 全 人 和 和 启 | 加 ge 
管理 站 点 
EEC 文件 
P| 图 
[Em 
2-20 站 点 MySite 


图 2-21 “管理 站 点 "对话 框 


2.3.2 管理 站 点 


建立 本 地 站 点 之 后 ,还 可 以 对 整个 站 点 进行 进一步 的 管理 。 例 如 新 建站 点 、 编 辑 站 
点 ,复制 站 点 ,删除 站 点 、 导 入 导出 站 点 等 ,下 面 以 前 面 建立 的 站 点 为 例 介绍 管理 站 点 的 
基本 方法 。 


(1) 启动 Dreamweaver CS3 之 后 ,选择 “站 点 ”>“ 管 理 站 点 "菜单 命令 ,打开 “管理 站 
点 ”对 话 框 ,如 图 2-21 所 示 。 
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(2) 在 “管理 站 点 ?对 话 框 左 侧 列表 框 中 选择 需要 编辑 的 站 点 ,然后 单 击 右 侧 按钮 ,就 
可 以 进行 相应 的 操作 了 。 

单 击 “ 新 建 ” 按 钮 ,打开 站 点 定义 对 话 框 ,可 以 新 建 一 个 站 点 ,方法 如 上 。 

单 击 “ 编 辑 ” 按 钮 ,打开 站 点 定义 对 话 框 ,可 以 修改 站 点 信息 ,如 图 2-22 所 示 。 


后。 Prewrenver C53 中 有 站 训 是 妇 件 和 文件 天 的 集合 ， 它 对 应 于 有 多 器 上 的 eb 站 
您 打算 为 您 的 站 点 起 什么 名 字 ? 
[FE | 


| 
示例 pySite 


您 的 站 点 的 JTTE 地 址 WEL) 是 什么 ? 
hetp:1/ ] 
示例 :http: /rm myiost_ com/nySite 


ee 


图 2-22 站 点 定义 对 话 框 


单 击 “ 删 除 ” 按 钮 ,可 以 将 站 点 文件 夹 从 Dreamweaver 中 清除 。 
单 击 “ 导 出 ”“ 导 入 ”按钮 可 以 在 不 同 的 计算 机 上 使 用 、 编 辑 该 站 点 。 


2.4 网 页 文档 的 基本 操作 


掌握 站 点 的 创建 和 管理 之 后 ,下 面 介绍 网 页 文档 的 基本 操作 ,如 创建 网 页 、 编 辑 网 
页 预览 网 页 .打开 和 关闭 网 页 等 。 


2.4.1 创建 网 页 

在 Dreamweaver CS3 中 创建 网 页 的 方法 有 许多 种 ,最 常用 的 是 通过 “文件 "菜单 和 
“文件 "面板 创建 网 页 。 

需要 提醒 的 是 创建 站 点 之 后 ,新 建 的 网 页 文档 是 隶属 于 当前 站 点 中 的 文档 。 

1) 通过 "文件 ”菜单 创建 网 页 

选择 “文件 ”>“ 新 建 " 命 令 , 如 图 2-23 所 示 , 弹 出 “新 
建文 档 " 对 话 框 ,在 此 对 话 框 中 ,用 户 可 以 根据 需要 选择 | Ctrl 


在 Br 四 中 浏览 (8B). .Ctrl+Alt+0 
文档 类 别 、 网 页 类 型 以 及 该 类 型 相对 应 的 网 页 样式 ,例如 


选择 “空白 页 ”一 HTML 类 型 “无 ?布局 样式 .如 图 2-24 
所 示 。 
选择 好 样式 和 页 面 类 型 之 后 . 单 击 “创建 "按钮 ,就 可 图 2-23 新 建 命令 
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i 


Jarsseript 
mm 


动作 脚本 


ASP Javaseript 
ASP VESeript 
ASP JET C# 
SPINET YB 
Coldpusion 


ColdFusion 担 件 
党 潍 引 全 Auroraesuada 国 


me ， 左 侧 栏 、 局 CS5 位 置 .| 需 加 到 六 档 头 


辐 
3] 
国 
和 
国 
a] 
国 
国 
be] 
同 
ea] 
总 
国 


CE 


2-24 “新 建文 档 " 对 话 杠 


以 新 建 一 个 指定 的 网 页 文档 ,如 图 2-25 所 示 。 


[Untitled-1 (XHTML) 


图 2-25 新 建 空白 网 页 文档 


2) 通过 “文件 ”面板 创建 网 页 

在 “文件 ”面板 窗口 中 ,选取 需要 创建 网 页 的 站 点 ,然后 右 击 站 点 ,选择 快捷 菜单 中 的 
“新 建文 件 ” 命 令 ,如 图 2-26 所 示 , 此 时 就 在 站 点 下 新 建 了 一 个 名 称 为 Untitled. htm 的 网 
页 文档 。 

值得 一 提 的 是 网 站 首先 需要 建立 首页 ,首页 默认 的 文件 名 取决 于 用 户 申 请 的 主页 空 
间 ,一般 是 index. htm index. html、default. htm、default. html 等 。 用 户 可 以 通过 “文件 ” 
菜单 保存 网 页 时 进行 命名 ,也 可 以 直接 在 “文件 ”面板 里 以 编辑 的 方式 进行 命名 ,如 图 2-27 
所 示 。 
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EL 和 资源 “代码 片断 


图 2-26 在 “文件 ”面板 中 新 建文 件 图 2-27 ” 重 命名 
2.4.2 ”编辑 网 页 


网 页 文档 创建 好 之 后 ,用 户 就 可 以 编辑 网 页 了 ,如 输入 文本 、 插 入 图 形 图 像 \ 插 入 动 
面 、 择 入 音频 和 视频 、 剪 切 、 拷 贝 粘贴 删除 、 复 制 、 重 命名 等 。 

编辑 的 途径 是 通过 “文件 ”面板 , 右 击 选中 的 网 页 文档 ,选择 快捷 菜单 中 的 “编辑 ” 命 
令 ,选择 相应 的 编辑 方式 ,对 网 页 文档 进行 操作 ,如 图 2-28 所 示 。 


新 建文 件 (F) Y 
新 建文 件 夹 (B) 3 
打开 (0) 
打开 方式 中 
剪 切 (C) Ctrltx 
拷贝 () Ctrl4C 选择 (8) 有 
粘贴 (A) Ctrl+VY | 
开除 D)。 Del Ey 
复制 L) CtrlitD 上 传 加 
重 命名 (N) F2 友 回 介 
撤消 取出 四) 
灵 示 取 出 者 fp 
图 2-28 编辑 网 页 


2.4.3 预览 网 页 


预览 网 页 就 是 指 在 浏览 器 中 查看 网 页 的 最 终 效果 。 预 览 网 页 的 方式 比较 多 ,但 常用 
的 有 下 面 三 种 : 

(1) 通过 使 用 快捷 键 F12 在 浏览 器 中 对 网 页 效果 进行 预览 。 

(2) 在 菜单 栏 中 选择 “文件 ”>“ 在 浏览 器 中 预览 ”>IExplore 命令 进行 预览 (如 果 当 
前 计算 机 中 安装 了 多 个 浏览 器 ,也 可 以 选择 不 同 的 浏览 器 进行 预览 ) 。 

(3) 单 击 “ 文 档 工具 栏 * 中 的 “在 浏览 器 中 预览 /调试 "按钮 ,选择 “预览 在 IExplore” 命 
令 预 览 网 页 。 

需要 提醒 的 是 : 虽然 Dreamweaver 是 一 款 “ 所 见 即 所 得 ”的 网 页 编辑 软件 ,但 是 网 页 
的 最 终 效果 还 是 以 浏览 器 中 的 效果 为 准 。 
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2.4.4 打开 和 关闭 网 页 文档 


1. 打开 网 页 文档 


打开 已 经 建立 的 网 页 文档 的 方法 主要 有 如 下 几 种 : 

(1) 选择 "文件 ”打开 ?命令 ,在 弹出 的 对 话 框 中 选择 站 点 文件 夹 中 需要 打开 的 网 
页 文档 。 

(2) 在 “文件 ?面板 的 站 点 管理 器 中 找到 相应 的 网 页 文档 ,直接 双击 打开 ,如 图 2-29 
所 示 。 

(3) 按 Ctrl 十 O 键 ,在 弹出 的 对 话 框 中 选择 并 且 打 开 网 页 文档 。 

(4) 在 页 面 标题 处 右 击 ,在 弹出 的 快捷 菜单 中 选择 打开? 命令。 


2. 关闭 网 页 文档 


关闭 网 页 的 方法 主要 有 以 下 几 种 : 

(1) 选择 “文件 ”一 “关闭 ”命令 ,关闭 当前 网 页 文档 。 

(2) 单 击 网 页 文档 右上 角 的 国 按 钮 。 

(3) 使 用 Ctrl 十 W 组 合 键 。 

(4) 在 网 页 标题 处 右 击 ,在 弹出 的 快捷 菜单 中 选择 “关闭 ”命令 ,如 图 2-30 所 示 。 


新 建 (0).… 
打开 (0)... 


关闭 (C 


| 全 部 关闭 (E) 
下 wi 国 | 辐 | 关闭 其 他 文件 (D) 
织 CG| 全 人 角 全 | 加 二 
日 加 站 点 - ysit 文件 志 另存 为 (8)... 
index ht 保存 全 部 (L) 
图 2-29 打开 网 页 文档 图 2-30 关闭 网 页 文档 


2.5 IIS 的 安 获 与 配置 


2.5.1 IIS 的 简介 


IIS(Internet Information Server ,因特网 信息 服务 器 ) 是 Microsoft 公司 开发 的 Web 
服务 器 技术 ,提供 了 强大 的 Internet 和 Intranet 服务 功能 。IIS 具有 简单 易 用 .安全 可 靠 、 
集成 化 管理 等 特点 , 它 集成 了 Web 服务 FTP 服务 .NNTP 服务 和 SMTP 服务 ,分 别 用 
于 网 页 浏览 ,文件 传输 、 新 闻 服 务 和 邮件 发 送 等 方面 ,使 用 户 能 够 在 网 络 上 方便 地 发 布 
信息 。 

静态 网 页 制作 好 以 后 ,可 以 直接 在 浏览 器 中 进行 预览 和 测试 ,但 是 动态 网 页 制作 好 
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以 后 ,必须 要 在 Web 服务 器 上 进行 预览 和 测试 ,也 就 是 说 需要 搭建 一 个 Web 服务 器 的 环 
境 , 那 么 IIS 就 是 一 个 简单 易 用 的 Web 服务 器 搭建 系统 ,包括 早期 的 Windows 98、 
Windows 2000, 目 前 常用 的 Windows XP、Windows Server 2003, 还 有 现在 的 Windows 7、 
Windows Server 2008 均 可 以 通过 IIS 在 个 人 电脑 或 服务 器 上 搭建 一 个 Web 服务 器 ,用 
来 开发 测试 动态 网 页 ,甚至 可 以 直接 用 来 发 布 静 态 网 站 和 动态 网 站 。 

目前 ;IIS 有 多 个 版 本 ,其 中 IIS 5. 1 版 本 用 于 Windows 2000 操作 系统 和 Windows 
XP 操作 系统 ,IIS 6. 0 版 本 用 于 Windows Server 2003 操作 系统 ,IIS 7. 0 版 本 用 于 
Windows Vista 操作 系统 、Windows Server 2008 操作 系统 和 Windows 7 操作 系统 。 

本 书 以 Windows XP 操作 系统 上 安装 IIS 5. 1 版 本 为 例 进 行 讲解 。 


2.5.2 IIS 的 安装 


Windows XP 操作 系统 上 安装 IIS 服务 器 的 步骤 如 下 : 
(1) 打开 “控制 面板 "窗口 ,双击 “添加 或 删除 程序 ”图 标 ,打开 如 图 2-31 所 示 的 “添加 
或 删除 程序 ”窗口 。 


当前 安装 的 多 口号 示 更 新 (2) ”反方 式 [5): [名称 


起 迷 
上 次 便 用 日 期 2008-1] -大 
Er 
大 小 94,8185 


A Aleahal T1208 


六 条 


本 
Dell Toucheaa 


图 2-31 “添加 或 删除 程序 "窗口 


(2) 单 击 “ 添 加 /删除 Windows 组 件 ” 按 钮 ,打开 “Windows 组 件 向 导 ” 对 话 框 , 在 该 
对 话 框 中 选中 “Internet 信息 服务 (IIS)” 复 选 框 ,如 图 2-32 所 示 。 

(3) 单 击 “ 详 细 信 息 ” 按 钮 ,打开 “Internet 信息 服务 (IIS) ”对话 框 ,如 图 2-33 所 示 , 从 
中 选择 需要 安装 的 Windows 组 件 的 复 选 框 ,建议 选中 所 有 的 组 件 。 

(4) 单 击 "确定 ?按钮 返回 ”Windows 组 件 向 导 ” 对 话 框 , 单 击 “ 下 一 步 ” 按 钮 打开 “下 
在 配置 组 件 ” 对 话 框 ,如 果 光 驱 中 没有 放 入 系统 光盘 (安装 操作 系统 时 所 用 的 Windows 
XP 光盘 ,但 不 能 是 GHOST 版 本 的 光盘 ), 将 同时 打开 “插入 磁盘 ”对 话 框 ,此 时 在 光驱 中 
插入 Windows XP 安装 光盘 ,然后 单 击 “ 确 定 ” 按 钮 ,系统 开始 安装 ,如 图 2-34 所 示 。 

需要 说 明 的 是 ,IIS 的 安装 包 也 可 以 从 Internet 上 直接 下 载 。 这 种 情况 下 就 不 需要 
操作 系统 安装 光盘 ,在 安装 时 只 需要 将 路 径 指定 到 下 载 的 IIS 安装 包 即 可 。 

(5) 安装 完毕 后 ,系统 将 弹出 “完成 Windows 组 件 向 导 ” 对 话 框 , 单 击 “ 完 成 ”按钮 完 
成 安装 。 
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Windows 组 件 向 导 


Yindows 钥 件 
可 以 添加 或 删除 Windows XP 的 组 件 。 


Se sane 


回 四 Yindows Nedia Player 


0.0 吧 
00m 周 


描述 其 de Ey Te 事务 处 理 、Active 


所 需 磁盘 空间 12.2 WE 
可 用 磁盘 空间 33639.1 有 


详细 信息 了 ) 


| 取消 


2-32 “Windows 组 件 向 导 ” 对 话 框 


Internet 服务 (IIS) 


区 | 


医 吉 蝗 各 斤 ; 吉 扣 潮 先生 不 色相 表示 只 会 安 半 妇 们 的 一 


了 aterast 信息 服务 IS) 的 了 组件) 


回 偏 Iaternet 信息 服务 管理 单元 
回 J 四 SMTF Service 

回信 公用 文件 

回 奢 万 维 同 服务 


1.3B 国 
L1 MB 
1.0 MB 
2.3 肥 


[二 3. 


描述 。 为 外 陡 用 于 上 载 和 下 载 文件 的 TTP 站 点 提供 支持 


图 2-33 “Internet 信息 服务 (11S) ”对 话 框 


Windows 组 件 向 导 


正在 配置 组 件 
安装 程序 正在 根据 您 的 请 求 ， 进行 配置 更 疏 。 


到 请 稍 候 ,安装 程序 正在 配置 姐 件 。 所 花 时 间 取决 于 选 定 的 组 件 。 


状态 。 正在 复制 文件 


[ininiiaiii 


2-34 ”安装 进度 对 话 框 
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2.5.3 IIS 的 简单 配置 


安装 完 IIS 服务 器 之 后 ,需要 创建 IIS 服务 器 。 创 建 IIS 服务 器 主要 是 创建 Web 服 
务 器 .FTP 服务 器 和 SMTP 虚拟 服务 器 等 。Web 服务 器 可 以 将 各 种 有 效 信息 发 布 在 
Internet 上 ,即将 网 站 发 布 到 Internet 上 ;FTP 服务 器 可 以 使 用 户 在 服务 器 和 客户 机 之 间 
快速 地 传送 文件 ;SMTP 虚拟 服务 器 可 以 实现 邮件 的 收发 功能 。IIS 安装 完毕 之 后 ,系统 
将 自动 创建 一 个 默认 的 Web 网 站 .一 个 默认 的 FTP 站 点 和 一 个 默认 的 SMTP 虚拟 服务 
器 ,用 户 可 以 自己 创建 站 点 和 服务 器 ,修改 和 设置 相关 属性 。 

下 面 以 创建 MySite 站 点 为 例 , 介 绍 如 何在 IIS 中 简单 配置 Web 服务 器 。 

(1) 打开 * 控 制 面板 ”窗口 ,双击 * 管 理工 具 ” 图 标 .打开 * 管 理工 具 ” 窗 口 , 如 图 2-35 
所 示 。 


文件 和 文件 下 任务 
区 # 忱 # 天 
9 2 了 B 
1 
必 Y 
2 


Ej 
2s 

组 | 
9 [ee 约 昨 

Ps 


9 个 对 多 加 0 1 个 作 车 对 其} 14.1 ID 辟 我 的 电 各 


图 2-35 “管理 工具 ”窗口 


(2) 在 “管理 工具 ”对 话 框 中 双击 “Internet 信息 服务 "图 标 购 .启动 IS。 在 打开 的 
“Internet 信息 服务 "窗口 中 ,本 地 计算 机 有 3 项 服务 :“ 网 站 ”“FTP 站 点 "“ 默 认 SMTP 
虚拟 服务 器 ”, 如 图 2-36 所 示 。 

(3) 单 击 “ 网 站 ”一 “默认 网 站 ”, 选 中 “默认 网 站 ”, 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 
中 选择 “属性 ”命令 ,如 图 2-37 所 示 。 

(4) 打开 “默认 网 站 属性 ”对 话 框 ,如 图 2-38 所 示 。 在 此 对 话 框 中 有 “网 站 ”“ISAPI 得 
选 器 ”“ 主 目录 ”“ 文 档 ”“ 目 录 安 全 性 ”“HTTP 头 ”“ 自 定义 错误 ”、ASP. NET 8 个 标签 。 

用 户 浏览 网 页 的 顺序 一 般 是 这 样 的 : 识别 IP 王 查找 端口 一 辨识 “主机 头 ( 域 名 )” 名 
称 一 进入 到 站 点 主 目录 -查找 网 站 首页 ,因此 一 般 情况 下 ,只 需要 对 这 些 参数 进行 重点 
设置 ,其 他 参数 保留 默认 值 即 可 。 

(5) 在 “网 站 ”选项 卡 中 设置 网 站 的 名 称 、IP 地 址 以 及 连接 端口 等 属性 ,如 图 2-39 
所 示 。 
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如 Internet 信息 服务 
文件 操作 (和 ) 查看 ( 帮助 人 0 
+ 二 | 国 | 四 | 食 国明 | am 1 


a 计算 机 _ 站 本 地 版 本 _ 
已- 曼 Q0CC (本 地 计算 机 ) 易 QUCC (本 地 计算 机) 是 IIS V5.1l 
生 固 网 站 
名 外 FTP 站 点 
名 把 默认 SITP 虚拟 服务 器 


2-36 “Internet 信息 服务 "窗口 


i Intcrnect 


文件 人 ) 操作 (A) 查看 (YD 帮助 (8) 

4 十 | 白 国 | 办 日 七 国 困 | 旦 

国 Internet 信息 服务 基态 

三 -看 gUCC( 太 地 计算 机 ) ndows\help\iishelp 
rogran Files\Com, , 

C: \WINDONS\meb\printers 


筑 源 官 理 呢 E) 
打开 @) 

浏览 (@) 

停 上 (P) 

暂停 (和 ) 

新 建 (D) 

所 有 任务 (E) 

查看 (中 

重 命名 人) 


新 (E) 
列表 (LD).. . 


局 用 日 志 记 录 到) 


活动 日 志 格 式 只; 


[rmer ， 硬 [EEGE 


图 2-38 “默认 网 站 属性 ”对 话 框 
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默认 网 站 属性 


a TT 
| ST 请 器 ”| 主 上 录 文档 目录 Rs 性 | 


网 站 标识 


MySite 


厂 回 朋 用 日 志 记录 四) 


活动 日 志 格 式 中 


5C 扩展 日 志文 件 格式 国生] 


2-39 “网 站 ”选项 卡 设置 


“描述 "文本 框 中 输入 站 点 名 称 MySite。 

“IP 地 址 ?列表 框 用 来 指定 Web 站 点 的 IP 地 址 ,如 果 需 要 指定 一 个 固定 的 IP 地址， 
则 选择 这 个 固定 的 IP 地 址 ( 即 本 机 网 卡 上 所 指定 的 IP 地 址 );: 如 果 Web 站 点 有 多 个 IP 
地 址 或 者 没有 固定 的 IP 地 址 ,选择 “(全 部 未 分 配 )”; 如果 指 定 了 多 个 主机 头 , 则 “IP 地 
址 ”一 定 要 选择 "(全 部 未 分 配 )”, 否 则 可 能 导致 访问 者 无 法 访问 。 

对 于 “主机 头 ” 而 言 ,如 果 IIS 有 多 个 站 点 , 则 单 击 “ 高 级 "按钮 ,进入 “多 网 站 高 级 配 
置 ?对 话 框 设置 ;如 果 IIS 只 有 一 个 站 点 , 则 无 须 写 入 主机 头 标识 。 

Web 站 点 的 默认 访问 TCP 端口 是 80。 当 然 ,我 们 也 可 以 修改 站 点 的 端口 例如 
8080 ,那么 访问 者 在 访问 网 站 时 需要 输入 端口 号 才 行 ,如 http://127.0.0.1:8080。 

(6) 打开 “ 主 目录 ”选项 卡 , 如 图 2-40 所 示 ,在 该 选项 卡 中 ,可 以 设置 网 站 文件 存放 的 
位 置 和 网 站 的 访问 权限 等 。 

“连接 到 资源 时 的 内 容 来 源 ” 用 来 指定 所 建立 的 Web 站 点 存放 的 位 置 , 它 有 三 个 选项 : 
“此 计算 机 上 的 目录 ”“ 另 一 台 计算 机 上 的 共享 "“ 重 定向 到 URL”。 由 于 用 户 是 自己 建立 
MySite 站 点 ,因此 选择 默认 的 “此 计算 机 上 的 目录 ”选项 ,在 “本 地 路 径 ” 文 本 框 中 输入 站 点 
目录 (下 :\MySite) 或 者 单 击 “ 浏 览 ” 按 钮 在 弹出 的 对 话 框 中 选择 站 点 目录 (E:\MySite)。 

“本 地 路 径 ? 下 方 是 设置 当前 目录 访问 权限 区 域 ,该 区 域 中 相关 选项 的 意义 如 下 : 

中 “脚本 资源 访问 ?选项 允许 在 站 点 目录 中 放置 包含 脚本 的 动态 网 页 ,以 实现 Web 
应 用 程序 的 相关 功能 ,如 开发 动态 网 站 需要 选中 该 项 。 

@@“ 读 取 ” 选 项 允许 客户 读 取 站 点 目录 的 内 容 。 通 常 必 须 选 中 该 项 ,否则 用 户 无 法 访 
问 站 点 。 

@@“ 写 入 ”选项 允许 用 户 通过 浏览 器 往 站 点 中 写 入 文件 ,对 于 一 个 安全 站 点 来 说 ,该 
项 不 应 该 被 选中 ,以 免 用 户 从 您 的 站 点 中 读 取 源 文件 .或 是 任意 删除 站 点 中 的 文件 。 

@@ “目录 浏览 ”选项 允许 用 户 在 访问 站 点 目录 时 ,如 果 目 录 中 没有 默认 主页 , 则 在 浏 
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览 器 中 以 目录 列表 的 形式 显示 站 点 中 的 所 有 文件 。 通 常 , 如 果 不 是 为 了 在 站 点 中 提供 下 
载 文件 , 则 不 应 选中 该 项 。 

“执行 权限 ”菜单 区 域 可 以 控制 应 用 程序 运行 的 权限 。 其 中 “无 ”选项 表示 目录 不 允 
许 任何 程序 或 脚本 运行 。“ 纯 脚本 ”选项 表示 脚本 应 用 程序 可 以 在 该 目录 下 运行 ,而 无 须 
拥有 “执行 "权限 ,可 以 对 包含 ASP 脚本 、Internet 数据 库 接口 (IDC) 肢 本 或 其 他 脚本 的 目 
录 使 用 “脚本 ”权限 ,“ 脚 本 ”权限 比 “ 执 行 ” 权 限 安全 ,因为 在 这 种 权限 下 二 进 制 文件 无 法 
运行 。“ 脚 本 和 可 执行 文件 选项 表示 任何 应 用 程序 可 以 在 该 目录 下 运行 。 

(7) 打开 "文档 ?选项 卡 ,如 图 2-41 所 示 。 在 该 选项 卡 中 ,可 以 设置 Web 站 点 的 主页 
名 称 , 这 里 默认 首页 文档 为 Default. aspx、Default. htm、 Default. asp、 index. htm、 


lisstart. asp 。 
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单 击 “ 添 加 ”按钮 ,可 以 添加 新 的 默认 文档 名 称 , 单 击 “ 删 除 ” 按 钮 ,可 以 删除 不 需要 的 
默认 文档 名 称 。 单 击 文档 名 称 左 侧 的 箭头 按钮 国 和 国 , 可 以 改变 默认 文档 的 优先 级 
顺序 。 

(8) 至 此 ,Web 站 点 的 重点 设置 已 设置 完成 ,用 户 也 可 以 根据 需要 自行 设置 其 他 选 
项 , 单 击 “MySite 属性 ”对 话 框 中 的 “确定 ”按钮 完成 设置 返回 。 

(9) 完成 Web 站 点 的 设置 以 后 .在 浏览 器 的 地 址 栏 中 输入 “http://localhost” 或 
“http:// 主 机 的 IP 地址 ”就 可 以 用 来 测试 配置 好 的 网 站 。 


2.6 实例 : “北京 答 运 守 冬 物 一 一 和 禄 妊 
下 点 的 建 云 与 配置 


建立 和 配置 “北京 奥运 吉 书 
建立 和 配置 站 点 以 及 在 IS 服务 器 中 建立 和 配置 Web 站 点 ,具体 步 又 如 下 : 

(1) 打开 “我 的 电脑 ”窗口 ,双击 打开 “E:“ 盘 (在 其 他 盘 上 也 可 以 ), 在 下 盘 根 目录 下 
新 建文 件 夹 , 命 名 为 "FuWa”( 强 烈 建议 使 用 字符 ,不 要 使 用 汉字 ) ,如 图 2-42 所 示 。 


~ 工作 (E:) 
ET TE TE 


Om 0- i 2x | 四- 


[JE 了 3 


图 2-42 ”建立 FuWa 站 点 文件 夹 


(2) 选择 “开始 ”一 “所 有 程序 ”一 Adobe Dreamweaver CS3 命令 启动 Dreamweaver 
CS3, 选 择 “ 站 点 ”>“ 新 建站 点 ”菜单 命令 ,打开 自 定义 站 点 对 话 框 ,在 “您 打算 为 您 的 站 点 
起 什么 名 字 ?” 文 本 框 中 输入 FuWa, 如 图 2-43 所 示 。 

(3) 单 击 “ 下 一 步 ” 按 钮 ,在 “您 是 否 打 算 使 用 服务 器 技术 ,如 ColdFusion、ASP. 
NET、ASP、JSP 或 PHP?” 选 项 框 中 ,选择 “是 ,我 想 使 用 服务 器 技术 。” 选 项 ,在 “ 哪 种 服务 
器 技术 ?? 菜 单 中 选择 “ASP VBScript” 选 项 ,如 图 2-44 所 示 。 

(4) 单 击 “ 下 一 步 ” 按 钮 ,在 “在 开发 过 程 中 ,您 打算 如 何 使 用 您 的 文件 ?” 选 项 中 选择 


人 assniiaal 


Fu¥a 的 站 点 定义 为 


We 了 reanweaver CS3 中 的 站 点 是 文件 和 文件 到 的 集合 ， 它 对 应 于 服务 器 上 的 Yeb 站 


多 打 莽 为 弥 的 站 点 起 什么 名 字 ? 
Fural 

示例 ;MySite 
娩 的 站 点 的 ITTF 地 址 (VEL) 是 什么 了 
http:717 

示例 ;http; /www myHost com/mySite 


EH 


图 2-43 输入 站 点 名 称 


FuwWa 的 站 点 定义 为 


您 是 否 打算 使 用 服务 器 技术 ,加 ColdFusion、ASP_NET、ASP、JSP 或 FHF? 


人 〇 否 ， 我 不 想 使 用 服务 器 技术 。 中) 
日 是 ,我 想 使 用 服务 器 技术 。(Y) 


CF- 取消 和 


图 2-44 选择 服务 器 技术 


“在 本 地 进行 编辑 和 测试 (我 的 测试 服务 器 是 这 台 计 算 机 )” 选 项 ,在 “您 将 把 文件 存储 在 
计算 机 上 的 什么 位 置 ?” 文 本 框 中 输入 站 点 位 置 (E:\FuWa\) ,如 图 2-45 所 示 。 

(5) 单 击 * 下 一 步 ?按钮 ,在 其 他 配置 中 选择 默认 配置 即 可 ,最 后 单 击 “完成 ”按钮 完成 
站 点 的 建立 ,如 图 2-46 所 示 。 

(6) 启动 IIS 服务 器 , 单 击 “ 网 站 ”一 “上 默认 网 站 ”命令 ,选中 “默认 网 站 ”, 单 击 鼠 标 右 
键 ,在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ,打开 “默认 网 站 属性 ”对 话 框 ,在 “描述 "文本 框 
中 输入 *FuWa” 标 识 网 站 名 称 , 如 图 2-47 所 示 。 

(7) 选择 “ 主 目 录 ” 选 项 卡 , 单 击 “ 浏 览 ” 按 钮 ,在 打开 的 “浏览 文件 夹 ” 对 话 框 中 可 选 
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篇 辑 文件 ,第 3 部 分 


在 开发 过 程 中 ， 您 打算 如 何 使 用 您 的 文件 ? 


@ 在 本 地 进行 编辑 和 测试 ( 我 的 测试 服务 器 是 这 台 计 算 机 ) 包 ) 
〇 在 本 地 进行 编辑 ,然后 上 传 到 远程 测试 服务 器 起 ) 
〇 使 用 本 地 网 络 直接 在 远程 测试 服务 器 上 进行 编辑 中) 


您 格 把 文件 存 请 在 计算 机上 的 什么 位 置 ? 
© 


由 于 计算 机 上 已 安装 了 IIS， 因此 可 梅 计算 机 用 作 本 地 测试 服务 器 


EE=Em 攻 303LCa jC Ww ] 


图 2-45 输入 站 点 位 置 


择 Web 站 点 网 页 的 存放 位 置 , 即 选择 "E:\FuWa” 为 站 点 网 页 存放 的 位 置 , 如 图 2-48 
所 示 。 


EA 资源 “代码 片断 


回 局 用 日 志 记 录 下) 


活动 日 志 格 式 中) 
Y3C 扩展 日 志文 件 格式 


图 2-46 完成 站 点 的 建立 图 2-47 标识 网 站 名 称 


(8) 选择 “文档 "选项 卡 , 在 该 选项 卡 中 , 单 击 “ 添 加 ”按钮 ,输入 “index. asp”, 调 整 首 
页 优先 顺序 ,如 图 2-49 所 示 。 
(9) 单 击 “ 确 定 ” 按 钮 完成 网 站 整个 配置 。 
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图 此 计算 机 上 的 目录 四 ) 
加 另 一 各 计算 机 上 的 共享 G) 
自重 十 间 到 LW 


回 记录 访问 外 
回 素 引资 源 加 


AGE | Ci 

全 认同 直 > 
: 
- 中 殿 用 ) 国 


默认 网 站 属性 


HTP 头 I 自 定义 错误 
网 站 ]ISAPI 第 迁 器 | 主 日 录 文档 


句 启用 点 六 各色] 
index. htm 


Default. htm 


Defanlt asp 


加 局 用 文档 页 脚 O) 


2-49 设置 网 站 首页 


2.7 本 章 小 结 


本 章 主要 讲述 了 网 站 开发 环境 的 搭建 ,包括 在 Dreamweaver CS3 中 搭建 网 站 开发 环 
境 和 在 IIS 服务 器 中 搭建 Web 环境 。 

首先 介绍 Dreamweaver CS3 的 工作 界面 .建立 和 管理 站 点 以 及 网 页 文档 的 新 建 、 编 
辑 、 预 览 .打开 和 关闭 等 基本 操作 ;其 次 介绍 在 Windows XP 中 IIS 服务 器 的 安装 以 及 
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Web 站 点 的 基本 配置 ;最 后 本 章 以 贯穿 全 书 的 “北京 奥运 吉祥 物 一 一 福娃 ”站 点 为 实例 ， 
介绍 搭建 配置 福娃 站 点 的 详细 步 又 。 


2.8 刁 题 
一 、 填空 题 
于 5 汪 合 称 为 网 页 制作 “三 剑客 ”。 
2. 在 Dreamweaver CS3 中 ,提供 各 三 种 “文档 ”窗口 


视图 。 
3. 网 站 首先 需要 建立 首页 ,首页 默认 的 文件 名 取决 于 用 户 申 请 的 主页 空间 ,一 般 有 


、 o 


4. 在 Dreamweaver CS3 中 ,通过 使 用 快捷 键 在 浏览 器 中 对 网 页 效果 进行 
预览 。 

5. IIS 是 的 全 称 , 是 Microsoft 公司 开发 的 Web 服务 器 技术 。 

二 、 实 训 题 


1. 上 网 查看 Dreamweaver 的 最 新 版 本 ,并 了 解 其 新 的 功能 特点 。 

2. 在 自己 的 计算 机 上 安装 Dreamweaver CS3 ,熟悉 其 工作 区 集成 窗口 。 

3. 在 Dreamweaver CS3 里 新 建站 点 ,编写 一 个 基本 的 网 页 ,并 通过 浏览 器 预览 。 
4. 在 自己 的 计算 机 上 下 载 .安装 IIS 服务 器 ,并 进行 简单 的 配置 。 


fapie 
第 3 音 erepPier 本 


超 文 本 标记 语言 HTML 


HTML 语言 是 网 页 制作 的 一 种 规范 ,一 种 标准 ,是 网 站 开发 和 网 页 设计 的 最 基本 知 
识 , 几 乎 所 有 的 网 页 都 是 以 HTML 规范 书写 的 , 它 通过 标识 符 来 标记 网 页 的 各 个 部 分 。 
只 有 熟练 掌握 了 HTML 语言 ,才能 进行 后 期 的 开发 和 设计 ,尤其 是 动态 网 页 的 设计 更 加 
需要 HTML 语言 来 作 基 础 。 

本 章 主要 介绍 HTML 语言 的 基本 概念 、 基 本 结构 .语法 规则 以 及 使 用 HTML 制作 
网 页 的 各 种 标记 符 的 设置 方法 ,包括 网 页 文字 和 段落 的 设置 .网 页 中 表格 的 设计 、 图 片 和 
超 链接 的 设置 等 。 


3.1 HTML 概 于 


3.1.1 HTML 的 基本 概念 
1. HTML 介绍 


HTML 是 Hyper Text Markup Language( 超 文本 标记 语言 ) 的 缩写 , 它 是 构成 Web 
页 面 的 基本 元 素 , 它 是 一 种 规范 ,一 种 标准 ,几乎 所 有 的 网 页 都 是 以 HTML 格式 书 
写 的 。 

HTML 不 是 一 种 编程 语言 ,而 是 一 种 描述 性 的 标记 语言 , 它 通过 标识 符 来 标识 网 页 
中 内 容 的 显示 方式 ,例如 图 片 的 显示 尺寸 .文字 的 大 小 、 颜 色 、 字 体 等 。 而 WWW 浏览 器 
的 功能 就 是 对 这 些 标记 进行 解释 , 按 要 求 显示 出 文字 、 图 像 , 动 画 、 媒 体 等 网 页 内 容 。 

一 个 HTML 文件 的 后 缀 名 是 . html 或 . htm, 由 于 HTML 是 一 个 纯 文本 格式 的 
ASCII 文 件 ,因此 可 以 用 任何 文本 编辑 器 编写 HTML 网 页 文件 。 

HTML 语言 作为 一 种 描述 性 的 标记 语言 ,易学 易 懂 .能够 制作 出 精美 的 网 页 效果 ， 
其 主要 功能 如 下 : 

(1) 格式 化 文本 。 如 设置 文本 字体 .字号 .颜色 以 及 文本 段落 、 对 齐 方式 等 。 

(2) 创建 列表 。 把 信息 用 一 种 易 读 的 方式 表现 出 来 。 

(3) 建立 表格 。 表 格 为 浏览 者 提供 快速 找到 需要 信息 的 显示 方式 ,还 可 以 用 表格 来 
布局 网 页 。 
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(4) 插入 图 片 。 使 网 页 图 文 并 茂 , 还 可 设置 图 像 的 各 种 属性 ,如 大 小 ,边框 ,布局 等 。 
(5) 加 入 多 媒体 。 可 在 网 页 中 加 入 音频 视频、 动画 等 效果 。 
(6) 添加 交互 式 表单 。 如 文本 框 , 单 选 框 、 复 选 框 \ 列 表 框 和 按钮 等 。 


2. 标记 符 

标记 符 又 称 标签 ,用 来 控制 网 页 内 容 显示 效果 。 它 在 使 用 时 必须 用 "二 二 ” 括 起 来 。 
绝 大 多 数 标记 符 都 是 成 对 出 现 的 ,包括 开始 标记 符 和 结束 标记 符 。 开 始 标记 符 和 相应 的 
结束 标记 符 定义 了 标记 符 所 影响 的 范围 :结束 标记 符 与 开始 标记 符 的 区 别 在 于 有 一 个 斜 
线 。 标 记 符 是 不 区 分 大 小 写 的 ,但 通常 约定 标记 符 使 用 大 写字 母 , 这 有 利于 HTML 文档 
的 维护 ,其 格式 为 : 


< 标记 符 > 受 影响 的 内 容 < /标记 符 > 

3. 标记 符 的 属性 

标记 符 仅仅 用 来 标识 所 显示 的 内 容 , 但 如 何 控制 这 些 内 容 , 这 就 需要 在 标记 符 后 面 
加 上 相关 的 属性 来 实现 ,属性 用 来 描述 标记 符 标 识 对 象 的 特征 。 在 HTML 中 ,所 有 的 属 
性 都 放置 在 开始 标记 符 的 尖 括 号 里 ,属性 与 标记 符 之 间 用 空格 分 隔 ,属性 的 值 放 在 相应 
属性 之 后 ,用 等 号 分 隔 , 而 不 同 的 属性 之 间 用 空格 分 隔 并 且 无 先后 顺序 之 分 ,其 格式 为 : 

< 标记 符 属性 1= 属 性 值 1 属性 2= 属 性 值 2 …> 受 影响 的 内 容 </ 标 记 符 > 


例如 : 二 FONT color= "red" size 王 "3" 二 属性 示例 二 /FONT 
表示 字体 标记 过 FONT 二 有 属性 color 和 size, 属 性 color 表示 文字 的 颜色 ,属性 size 
表示 文字 的 大 小 。 


3.1.2 HTML 的 基本 结构 


HTML 网 页 文件 主要 由 文件 头 和 文件 体 两 部 分 内 容 构 成 。 其 中 ,文件 头 是 对 文件 
进行 一 些 必要 的 定义 ,文件 体 是 HTML 网 页 的 主要 部 分 , 它 包 括 文件 所 有 的 实际 内 容 ， 
下 面 是 HTML 网 页 的 基本 结构 。 


<HTML> HTML 文件 开始 
<HEAD> 文件 头 开 始 
文件 头 
< /HERAD> 文件 头 结束 
<BODY> 文件 体 开始 
文件 体 
</BODY> 文件 体 结束 
</HTML> HTML 文件 结束 


1. HTML 文件 标记 符 
二 HTML 放 和 二 /HTML 放 标记 符 放 在 网 页 文档 的 最 外 层 , 表 示 这 对 标记 符 之 间 的 
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内 容 是 HTML 文件 。 二 HTML 放 处 于 文件 的 最 前 端 ,表示 HTML 文件 的 开始 , 即 浏览 
器 从 二 HTML 二 开始 解释 ,而 二 /HTML> 则 位 于 文件 的 最 后 一 行 , 这 表示 这 一 整 份 的 文 
档 都 是 HTML 语法 的 文档 。 


2. HEAD 文件 头 标记 符 


<HEAD> 和 二 /HEAD> 是 HTML 文件 头 标记 符 , 它 用 来 说 明文 档 的 整体 信息 ， 
所 标记 的 内 容 并 不 会 出 现在 WWW 浏览 器 所 看 到 的 窗 体 中 。 过 HEAD>… 王 /HEAD>> 
通常 与 某 些 标记 符 一 起 使 用 ,下 面 是 一 些 主要 的 标记 符 : 

1) <TITLE>>…</TITLE> 

<TITLE>…</TITLE> 标 记 符 是 用 来 标识 网 页 文件 的 标题 , 它 出 现在 浏览 器 的 
标题 栏 中 ,一 个 网 页 只 能 有 一 个 标题 ,并且 只 能 出 现在 文件 的 头 部 。 

2) <META> 

过 META> 标 识 符 是 用 来 提供 文档 的 媒体 信息 ,目的 是 便于 浏览 器 识别 网 页 内 容 或 
者 便于 搜索 引擎 进行 查找 和 分 类 ,下 面 介 绍 几 种 常用 的 用 法 : 


<META http-equiv= "Content-Type" content="text/html; charset=gb2312"> 
用 来 标记 网 页 的 解码 方式 , 即 说 明 网 页 使 用 的 文字 和 语言 。 

<META name="Keywords" content=" 关 键 字 "> 

用 来 标记 搜索 引擎 在 搜索 你 的 页 面 时 所 取出 的 关键 字 。 

<META name="Description" content= "站 点 主要 内 容 "> 

用 来 标记 站 点 的 主要 内 容 。 

<META name="Author" content=" 作 者 名 称 "> 

用 来 标记 文档 的 作者 名 称 , 即 告诉 搜索 引擎 你 的 站 点 的 制作 者 。 

3. BODY 文件 体 标记 符 


过 BODY></BODY> 是 HTML 文件 的 主体 标记 符 。 网 页 正文 中 的 所 有 内 容 包 括 
文字 ,表格 .图像 声 音 和 动画 等 都 包含 在 这 对 标记 符 之 间 , 它 的 格式 为 BODY bgcolor 
= “color” backgroud= “image— url” text="“color” link="“color” vlink="“color” alink= 
“color” topmargin= “value” leftmargin="“value” >*…<=/BODY>>。 

其 主要 属性 含义 如 下 : 

(1) bgcolor: 标识 HTML 文档 的 背景 颜色 ,默认 设置 为 白色 。 

(2) background: 设置 HTML 文档 的 背景 图 片 ,可 以 使 用 的 图 片 格式 为 GIF， 
JPG 等 。 

(3) text: 标识 HTML 文档 的 正文 文字 颜色 , 它 定 义 的 颜色 将 应 用 于 整 篇 文档 。 

(4) 超 链接 颜色 : link、vlink、alink 分 别 控制 普通 超 链 接 .访问 过 的 超 链接 .当前 活动 
超 链接 的 颜色 。 
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(5) topmargin 和 leftmargin: 设置 网 页 主体 内 容 距 离 网 页 顶端 和 左 端 的 距离 。 
4. 第 一 个 网 页 


【实例 3-1】 HTML 基本 结构 网 页 。 


<HTML> 
<HEAD> 
<TITLE>my first page< /TITLE> 
< /HEAD> 
<BODY> 
This is my first homepage! 
< /BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-1 所 示 。 


ny first page — Microsoft Internet Explorer 


文件 中 编辑 人 E) 查看 由) 收 痊 和 ) 工具 CI) 帮助 0) 
Om © BAO Pm he ID 


地 址 0 | 回 E:\ 第 03 意 实例 \3-1 htnl 


This is my first homepage! 


图 3-1 第 一 个 网 页 


3.1.3 HTML 的 基本 语法 规则 


HTML 作为 一 种 标记 语言 ,在 编写 时 应 遵循 以 下 的 语法 规则 : 


(1) HTML 文件 以 纯 文本 形式 存放 ,扩展 名 为 HTM 或 HTML。 如 果 系 统 为 UNIX 


系统 , 则 扩展 名 必须 为 HTML。 


(2) HTML 不 区 分 大 小 写 ,例如 二 html 二 和 二 HTML 放 是 相同 的 。 
(3) 多 数 HTML 标记 可 以 租 套 ,但 不 可 以 交 又 。 例 如 : 


<P><FONT color="red" face= "方正 黑体 "> 网 站 开发 与 网 页 设计 </P>< /FONT> 


将 不 能 正确 显示 。 
(4) HTML 文件 一 行 可 以 写 多 个 标记 ,一 个 标记 也 可 以 分 多 行书 写 , 不 用 任何 续 
符号 ,例如 : 


<P><FONT color="red" face=" 方 正 黑 体 "> 


行 
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网 站 开发 与 网 页 设计 < /FONT></P> 
和 


<P><FONT color="red" 

face=" 方 正 黑体 "> 

网 站 开发 与 网 页 设计 

</FONT></P> 
都 是 正确 的 ,并 且 显示 效果 相同 ,值得 注意 的 是 ,在 HTML 标记 中 的 一 个 单词 不 能 分 两 
行书 写 。 

(5) HTML 源 文件 中 的 换行 、 回 车 符 和 多 个 连续 空格 在 显示 效果 中 是 无 效 的 。 显 示 
内 容 如 果 要 换行 必须 用 二 BR 二 标记 .分 段 必 须 使 用 <P 二 和 二 /P 二 标记 (二 /P 标 记 符 
可 以 省 略 ) ,如 果 源 文件 中 有 多 个 连续 的 空格 ,但 是 显示 时 也 只 显示 一 个 。 若 需要 多 个 空 
格 , 应 使 用 多 个 “&nbsp;" 转 义 符号 。 

(6) 网 页 中 所 有 的 显示 内 容 都 应 该 受 限 于 一 个 或 多 个 标记 ,不 应 有 游离 于 标记 之 外 
的 文字 或 图 像 等 ,以 免 产 生 错误 。 

(7) 所 有 用 到 的 标点 符号 应 使 用 英文 半角 状态 下 的 标点 符号 ,否则 将 会 出 现 语法 错 
误 ,但 是 字符 串 中 的 标点 符号 除外 。 


3.2 文字 与 段落 标记 


3.2.1 标题 字 标记 


功能 : 用 于 定义 文章 内 章节 标题 的 显示 格式 ,并 且 标题 字 会 单独 成 行 。 
格式 : 


<Hn align=" 对 齐 方式 "> 标题 文字 </Hn> 


属性 : n 用 来 指定 标题 文字 字号 的 大 小 。n 可 以 取 1 一 6 的 整数 值 , 数 字 越 小 ,字号 
越 大 。 

align 用 来 设置 标题 在 页 面 中 的 对 齐 方式 , 取 值 有 left( 左 对 齐 )、center( 居 中 )、right 
( 右 对 齐 ) .bottom( 位 于 底 端 ) 和 top( 位 于 顶端 ) 。 

【实例 3-2】 使 用 标题 字 标记 设置 标题 的 大 小 与 对 齐 方式 。 


<HTML> 

< HERAD> 
<TITLE> 设 置 标题 < /TITLE> 

</HEAD> 

<BODY> 
<H1> 第 1 级 标题 CH1)< /H1> 
<H2> 第 2 级 标题 CH2)< /H2> 
<H3> 第 3 级 标题 (CH3)< /H3> 
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<H4 align=left> 第 4 级 标题 (H4)( 居 左 )< /H4> 
<H5 align= center> 第 5 级 标题 (H5)( 居 中 )</H5> 
<H6 align=right> 第 6 级 标题 (H6)( 居 右 )< /H6> 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-2 所 示 。 


下 设置 标题 - Microsoft Internet Exzplorer 
文件 中 ”编辑 到) 查看 如) 收 亭 W) 工具 GD) 帮助 0 


Ga 日- 国 国 的 Per 灾 wax @| 全 -时 四- 口 公 ” 


目 \ 第 03 意 实例 \3-2 htnl 


第 1 级 标题 (H1) 
第 2 级 标题 (H2) 


第 3 级 标题 (H3) 
第 4 级 标题 (H4) 〈 居 左 7 
第 5 纹 标 题 (H5) (居中 ) 


EL CH6) (必用 ) 


图 3-2 浏览 器 显示 效果 


3.2.2 文字 格式 标记 


功能 : 设置 网 页 中 普通 文字 的 显示 效果 ,如 文字 大 小 、 字 体 、 颜 色 等 。 
格式 : 


<FONT face=" 字 体 " size=" 字 号 " color= "颜色 "> 被 设置 的 文字 < /FONT> 


属性 : face 属性 用 来 设置 字体 。 当 文字 为 汉字 时 ,格式 中 的 “字体 ”可 以 为 宋体 、 幼 
圆 隶书 楷体 _GB2312、 黑 体 、 仿 宋 _GB2312 等 。 当 文字 为 英文 时 ,字体 名 可 以 为 Times 
New Roman 等 约 50 种 字体 。 

size 属性 用 来 设置 文字 的 大 小 。 数 字 的 取 值 范围 为 1~7,size 取 1 时 最 小 , 取 7 时 
最 大 。 
color 属性 用 来 设置 文字 的 颜色 ,颜色 的 取 值 可 以 是 十 六 进 制 的 RGB 颜色 码 或 者 
HTML 给 定 的 颜色 常量 

【实例 3-3】 使 用 二 FONT> 标 记 的 size 属性 设置 文字 的 大 小 ,face 属性 设置 字体 ， 
color 属性 设置 文字 颜色 。 


<HTML> 


<HERAD><TITLE> 文 字 格 式 标记 < /TITLE>< /HEAD> 
<BODY> 


<H1> 设 置 文字 的 格式 < /H1> 


Musssarid 


<FONT size= "1l" color="#00FFFF">1 号 字 青 色 < /FONT><P> 
<FONT size="2" color="green">2 号 字 绿 色 < /FONT><P> 
<FONT size="3" face=" 幼 圆 " color= "orange">3 号 幼 圆 橘 黄色 < /FONT><P> 
<FONT size="4" face=" 隶 书 " color="#FF0000">4 号 隶书 深 红 色 </FONT><P> 
<FONT size="5" face=" 黑 体 " color= "greenyellow">5 号 黑体 黄 绿 色 < /FONT><P> 
<FONT size="6" face=" 方 正 舒 体 " color="dodgerblue">6 号 方正 舒 体 水 蓝 色 < /FONT><P> 
<FONT size="7" face="Arial " color="#000000">Welcome My Homepage!</FONT> 
<P> 

</BODY> 

</HTML> 


浏览 器 显示 效果 如 图 3-3 所 示 。 


文件 到 ) 论 往 GO ”查看 收 家 G) 工具 I) 帮助 加 > 
Ga @ - 国 国 的 | Pr 容 tax 思 | 合 - 怠 加 - 口 女 重 目 


地址 加 | 目 E; \ 弟 03 意 实例 \3-3. htnl [> ED 链接 


设置 文字 的 格式 


2 号 宁 绿色 
3 号 幼 园 桔 黄色 


4 号 束 书 深 红 人 色 


6 号 方正 舒 体 水 蔓 色 


Welcome My Homepage! 


图 3-3 浏览 器 显示 效果 


3.2.3” 字 型 标记 


功能 : 设置 文字 的 风格 ,如 加 粗 、 斜 体 、 带 下 划 线 、 上 标 、 下 标 等 。 

格式 : 这 是 一 组 标记 ,它们 可 以 单独 使 用 ,也 可 以 混合 使 用 产生 复合 修饰 效果 ,常用 
的 标记 格式 如 下 : 

(1) <B>…</B>>: 文字 显示 为 粗 体 。 

(2) 二 I 二 … 过 />: 文字 显示 为 斜体 。 

(3) 二 U 二 …</U 二 : 文字 显示 为 带 下 划 线 。 

(4) <STRIKE>>…</STRIKE> 或 者 一 S>…< 一 /S>: 删除 字 效果 。 

(5) <BIG>…</BIG>> : 使 文字 大 小 相对 于 前 面 的 文字 增 大 一 级 。 

(6) SMALL 二 …</SMALL>: 使 文字 大 小 相对 于 前 面 的 文字 缩小 一 级 。 

(7) <SUP>>…</SUP> : 下 标 。 

(8) <SUB>…</SUB>>: 上 标 。 
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(9) 二 BLANK 二 … 二 /BLANK 放 : 使 文字 显示 闪烁 效果 。 

(10) <TT>…</TT> : 以 等 宽 体 显示 西 文字 符 。 

(11) <CITE>…</CITE>: 输出 引用 方式 的 字体 ,通常 是 斜体 。 
(12) 二 EM 二 … 二 /EM : 强调 文字 ,通常 用 斜体 加 黑体 。 

(13) <STRONG>…</STRONG> : 强调 文字 ,通常 用 斜体 加 黑体 。 
【实例 3-4】 使 用 字 型 标记 设置 文字 的 风格 。 


<HTML> 
<HEAD><TITLE> 设 置 字 型 </TITLE>< /HEAD> 

<BODY> 

<B> 黑 体 </B><P> 

<I> 斜 体 </I><P> 

<U> 带 下 划 线 </U><P> 

<B><I> 粗 体 并 且 斜 体 </I></B><P> 

<STRIKE> 带 删除 线 < /STRIKE>< P> 

H< SUB>2</SUB>o<P> 


X< SUP> 3< /SUP><P> 
<BIG> 大 字体 </BIG><P> 
<SMALL> 小 字体 < /SMALL><P> 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-4 所 示 。 


文件 中 ”编辑 EE) 查看 收藏 WW) 工具 CID) 帮助 00) 
日 .四国 的 有 Ps 闪 wmx @ | 全- 导 回 - 


目 BE \ 第 03 意 实例 3-4_htnl 


3-4 浏览 器 显示 效果 


3.2.4 段落 标记 和 强制 换行 标记 
在 HTML 文档 中 ,无 法 用 多 个 回 车 .空格 Tab) 键 来 调整 文档 段落 的 格式 ,而 要 用 
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HTML 的 标记 来 强制 换行 和 分 段 。 

1. 段落 标记 

功能 : 段落 标记 二 P 二 定义 一 个 新 段落 的 开始 , 它 不 但 能 使 后 面 的 文字 换 到 下 一 行 ， 
还 可 以 使 两 段 之 间 多 一 空 行 。 由 于 一 段 的 结束 意味 着 新 一 段 的 开始 ,所 以 使 用 二 P 二 也 
可 省 略 结束 标记 。 

格式 : 

<P align= "对齐 方式 "> 
或 

<P align= "对齐 方式 ">…</P> 


属性 : 段落 标记 二 P 二 的 align 属性 用 来 设置 段落 的 对 齐 方式 ,其 取 值 可 以 为 left、 
center 或 right, 分 别 表示 居 左 、 居 中 、 居 右 , 缺 省 时 默认 为 left。 


2. 强制 换行 标记 
功能 : 强制 换行 标记 二 BR 二 通常 单独 出 现 , 放 在 一 行 的 末尾 ,可 以 使 后 面 的 文字 、 图 


片 、 表 格 等 显示 于 下 一 行 ,但 是 不 会 在 行 与 行 之 间 留 下 空 行 。 
格式 : 


文字 <BR> 


注意 : 通常 一 个 段落 标记 <P 二 可 以 看 作 是 两 个 强制 换行 标记 BR 二 <BR>。 
【实例 3-5】 段落 标记 与 强制 换行 标记 的 使 用 。 
<HTML> 
<HERD><TITLE> 段 落 标记 与 强制 换行 标记 的 使 用 </TITLE> </HERD> 
<BODY><P align="center"> 段 落 标记 </p> 
段落 标记 
<P> 强 制 换行 标记 <BR> 
强制 换行 标记 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-5 所 示 。 
3.2.5 水平线 标记 


功能 : 水 平 线 标记 二 HR 二 可 以 在 页 面 中 显示 一 条 水 平 线 . 将 不 同 功能 的 页 面 内 容 分 
隔 开 ,使 之 整齐 明了 。 当 浏览 器 执行 HTML 文件 中 的 标记 时 ,会 在 此 处 换行 ,并 加 入 一 
条 水 平 线段 。 

格式 : 


<HR align=" 对 齐 方式 " size=" 横 线 粗 细 " width=" 横 线 长 度 " color=" 横 线 颜色 " noshade> 
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要 段落 标记 与 强制 岳 行 标记 的 使 用 
文件 四 加 名 下 ) 查看 轨 。 收 臣 丰 ) 工具 GD 帮助 0 
Om © 国 加 的 Pr mx @ | DB- SE EM 


地 址 加 ) | 目 :\ 第 03 章 实例 \3-5 htel 


县 落 标记 


强制 换行 标记 
强制 换行 标记 


3-5 浏览 器 显示 效果 


属性 : 属性 align 设 定 横 线 放置 的 位 置 ,可 选择 left right 或 center。 

属性 size 设 定 线条 粗细 ,以 像素 为 单位 ,默认 为 2 。 

属性 width 用 于 设 定 线段 长 度 , 可 以 是 绝对 值 ( 像 素 为 单位 ) ,也 可 以 是 相对 值 ( 百 分 
比 为 单位 ) 。 

属性 color 用 于 设 定 线条 颜色 ,默认 值 为 黑色 ,颜色 可 以 用 相应 英文 单词 或 以 # 引导 
的 十 六 进 制 数 代码 来 表示 。 

属性 noshade 设 定 线条 为 平面 显示 (没有 三 维 效果 ) , 若 缺 省 则 有 阴影 或 立体 效果 。 

【实例 3-6】 水 平 线 标记 的 使 用 。 


<HTML> 
<HEAD><TITLE> 水 平 线段 标记 的 应 用 </TITLE>< /HEAD> 
<BODY> 
<CENTER><H3> 水 平 线 < /H3>< /CENTER> 
<HR> 


<HR align="]left" size="6" width="320"> 
<HR align="center" size="8" width="60%" color="blue"> 
<HR align="right" size="8" width="360" color="red"> 
<HR size="4" width="80%" color="#CD0O61F"> 
<HR size="5" noshade> 
<HR width="70%" noshade> 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-6 所 示 。 
3.2.6 ”其 他 标记 
1. 分 区 显示 标记 


功能 : 分 区 显示 标记 可 以 使 文本 块 或 一 段 文字 在 网 页 上 : 左 对 齐 、 居 中 对 齐 和 右 对 齐 。 
格式 : 


<DIV align=" 对 齐 方式 "> 文本 或 图 像 </DIV> 
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下 水 手 绪 航 标记 的 应 用 一 icrosoft Internet EzpIorer 
文件 到) ” 蝙 辑 下) 查看 G) 路 套 &) 工具 好) 虱 助 0D 
Ga © -四 四 的 Pur tna BB-B a- 


地 址 四 | 目 第 四 间 实例 3-6 hnl 


3-6 浏览 器 显示 效果 


属性 : 属性 align 的 取 值 分 别 为 left center 和 right。 
【实例 3-7】 分 区 显示 标记 的 使 用 。 
<HTML> 

<HEAD> 


<TITLE> 分 区 显示 标记 的 应 用 < /TITLE> 
</HEAD> 
<BODY> 
<CENTER><H2> 分 区 显示 标记 的 应 用 < /H2>< /CENTER> 


<DIV align="center"> 居 中 center<BR> 居 中 <BR> center< /DIV> 


<DIV align= "left"> 居 左 left<BR> 居 左 <BR>left</DIV> 
<DIV align= "right"> 居 右 right<BR> 居 右 <BR>right< /DIV> 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-7 所 示 。 
号 分 区 显示 标记 的 应 用 一 Wicrosoft Internet Fxplorer 
ETIRTIETIERTIETTIEIII 


四 银 - 目 - 国 国 的 有 忆 旦 次 sax 回合 -名 可 - 口 和 堪 秘 自 


由:\ 第 03 章 实例 \3-7. htnl 


分 区 显示 标记 的 应 用 
居中 center 
居中 


center 


居 左 1eft 
居 左 


left 


3-7 浏览 器 显示 效果 
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2. 特殊 符号 标记 


浏览 器 解释 HTML 文件 时 ,首先 根据 =” 与 二 ”来 识别 HTML 标记 ,然后 再 确定 
这 两 个 符号 中 的 内 容 是 否 为 HTML 标记 ,如 果 是 HTML 标记 则 按 其 规则 解读 并 且 显 示 
输出 。 因 此 ,如 果 要 在 网 页 中 显示 "二 ”或 “二 "等 一 些 特殊 字符 时 ,就 要 用 其 代替 字符 ,如 
表 3-1 所 示 。 


表 3-1 一 些 特殊 字符 的 代替 字符 


特殊 字符 所 代替 的 字符 说 明 
& 特殊 字符 的 开始 
; 特殊 字符 的 结束 
x 小 于 号 
Gt 大 于 号 
Quot 双 引 号 
nbsp 空格 


【实例 3-8】 特殊 符号 标记 的 使 用 。 


<HTML> 
<HERD> 
<TITLE> 特 殊 符号 标记 的 使 用 </TITLE> 
</HEAD> 
<BODY> 
<P> 这 是 一 个 &lt;HTML&gt; 标 记 </P> 
<P> 它 是 一 种 squot ;网 页 标识 语言 squot ;< /P> 
<P> 谢 gnbsp; snbsp; gnbsp; gnbsp;&nbsp;&nbsp;&nbsp;&nbsp; 谢 </P> 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-8 所 示 。 
要 特殊 符号 标记 的 使 用 - Wicrosoft Internet Explorer 
ET TITETIRTIETTIETIII 
-日 : 国 国 多 记 并 闪 wx 如 全 -人 学 回 - 忆 外 日 
加 | 自 二 \ 第 03 章 实例 \3-8. htal 
这 是 一 个 HDL 标记 
它 是 一 种 "网 页 标识 语言 
谢 谢 


3-8 浏览 器 显示 效果 
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3.3 列表 标记 


HTLM 语言 经 常 使 用 列表 标记 来 标识 网 页 ,合理 地 使 用 列表 标记 可 以 起 到 提纲 和 
格式 排序 文件 的 作用 。 通 常 , 列 表 标 记分 为 无 序列 表 标 记 、 有 序列 表 标记 和 自 定义 列表 
标记 。 


3.3.1 无 序列 表 标 记 


功能 : 无 序列 表 就 是 项 目 间 并 无 顺序 关系 ,仅仅 利用 条 目 来 呈现 资料 ,此 种 无 序列 表 
标记 ,在 各 条 列 前 面 均 有 一 符号 以 示 区 隔 。 
格式 : 


<UL type=" 符 号 类 型 "> 
<LI type=" 符 号 类 型 "> 列表 项 目 一 
<LI type=" 符 号 类 型 "> 列表 项 目 二 
<LI type=" 符 号 类 型 "> 列表 项 目 三 
</UL> 


属性 : 无 序列 表 使 用 二 UL 和 二 /UL 放 > 表示 列表 的 开始 和 结束 ,二 LI 二 标记 表示 每 
一 个 列表 项 目 。 

type 属性 表示 在 每 个 项 目前 显示 符号 类 型 ,共有 三 种 选择 : type 二 "disc" 时 ,列表 符 
号 为 *@@"( 实 心 圆 );type 二 "circle" 时 ,列表 符号 为 “YO”( 空 心 圆 ) ;type 一 "square" 时 ,列表 
符号 为 图 (实心 方块 )。 

三 UL 和 二 LI 二 > 都 可 以 使 用 type 属性 ,在 二 UL 二 中 ,type 属性 表示 所 有 列表 项 使 
用 统一 符号 类 型 ,在 二 LI 二 中 ,type 属性 表示 不 同 的 列表 项 使 用 不 同 的 符号 类 型 。 

【实例 3-9】 无 序列 表 标 记 的 使 用 。 


<HTML> 
<HEAD> 
<TITLE> 无 序列 表 标 记 < /TITLE> 
</HEAD> 
<BODY> 
<P> 在 glt;UL&gt; 中 ,type 属性 的 使 用 </P> 
<UL type="disc"> 
<LI> 列 表 项 目 一 
<II> 列 表 项 目 二 
<LI> 列 表 项 目 三 
</UL> 
<P> 在 glt;LIggt; 中 ,type 属性 的 使 用 </P> 
<UL> 
<LI type="disc">DISC 
<LI type="circle">CIRCLE 
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<LI type="square">SQUARE 
</UL> 

</BODY> 

</HTML> 


浏览 器 显示 效果 如 图 3-9 所 示 。 
急 无 译 列表 标记 - Microsoft Internet Explorer 


文件 有 ) 篇 辑 电 查看 w) 收 豪 和 ) 工具 D) 帮助 人 D 


Bw- 日- 国 四 BP 次 wx BB 加 -DERO 


地 址 四 ] | 目 E:\ 弟 03 章 实例 \3-9._htnl 


在 <UL> 中 ，type 属 性 的 使 用 


“列表 项 目 三 


在 dL 中 ，type 属 性 的 使 用 


3-9 浏览 器 显示 效果 


3.3.2 ”有 序列 表 标记 


功能 : 有 序列 表 用 来 设置 有 前 后 顺序 之 分 的 列表 项 。 
格式 : 


<OL type= "序号 类 型 " start= "起 始 号 码 "> 
<LI type=" 序 号 类 型 "> 列表 项 目 一 
<LI type=" 序 号 类 型 "> 列表 项 目 二 
<LI type=" 序 号 类 型 "> 列表 项 目 三 
</OL> 


属性 : 有 序列 表 使 用 二 OL 这 > 和 二 /OL 二 表示 列表 的 开始 和 结束 ,二 LI 标记 表示 每 
一 个 列表 项 目 。 

type 属性 表示 在 每 个 项 目前 显示 的 序号 类 型 ,其 值 可 以 为 1( 阿 拉 伯 数字 )、A( 大 写 
英文 字母 ) .a( 小 写 英 文字 母 )、I (大 写 罗 马 字 母 )、i (小 写 罗马 字母 )。 

start 属性 用 来 设置 序号 的 开始 值 ,默认 值 为 1。 

【实例 3-10】 有 序列 表 标 记 的 使 用 。 


<HTML> 
<HEAD> 
<TITLE> 有 序列 表 标 记 < /TITLE> 
</HEAD> 
<BODY> 
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<OL> 
<II> 默 认 的 有 序列 表 
<ILI> 默 认 的 有 序列 表 
</OL> 
<OL type="a" start="5"> 
<LI> 第 1 项 
<LI> 第 2 项 
<LI> 第 3 项 
</OL> 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-10 所 示 。 
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图 3-10 浏览 器 显示 效果 


3.3.3 自 定义 列表 标记 


功能 : 用 于 需要 对 列表 条 目 进行 简短 说 明 的 场合 。 
格式 : 
<DL> 

<DT> 列 表 条 目 一 

<DD> 条 目 一 的 说 明 

<DT> 列 表 条 目 二 

<DD> 条 目 二 的 说 明 


</DL> 


属性 : 自 定义 列表 使 用 二 DL 这 > 和 二 /DL 二 表示 列表 的 开始 和 结束 。 
二 DT> 标 记 表 示 每 项 自 定义 条 目 名 称 。 
二 DD 二 标记 表示 每 条 自 定义 条 目的 说 明 , 自 动向 右 缩 进 。 
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【实例 3-11】 自 定义 列表 标记 的 使 用 。 


<HTML> 
<HEAD> 
<TITLE> 自 定义 列表 标记 < /TITLE> 
</HEAD> 
<P> 这 是 一 个 定义 性 列表 :</P> 
<BODY> 
<DL> 
<DT>DL 标记 符 
<DD> 代 表 HTML 自 定义 列表 。 
<DT>DT 标记 符 
<DD> 表 示 每 个 自 定义 列表 项 的 标题 。 
<DT>DD 标记 符 
<DD> 用 于 描述 自 定义 列表 项 的 内 容 。 
</DL> 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-11 所 示 。 
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这 是 一 个 定义 性 列表 ， 
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代表 HTIL 自 定义 列表 。 
DT 标记 符 


表示 每 个 自 定义 列表 项 的 标题 。 
DD 标记 符 
用 于 描述 自 定义 列表 项 的 内 容 。 


图 3-11 浏览 器 显示 效果 


3.4 碌 格 标记 


表格 在 网 站 开发 中 应 用 非常 广泛 ,用 户 可 以 通过 表格 方便 灵活 地 排版 ,目前 很 多 大 
型 网 站 也 都 是 借助 表格 排版 和 页 面 布局 的 。 表 格 可 以 把 相互 关联 的 信息 元 素 集中 定位 ， 
使 浏览 者 浏览 页 面 时 一 目 了 然 。 因 此 要 制作 出 优秀 的 网 页 ,就 应 该 熟练 掌握 表格 标记 。 

功能 : 建立 基本 表格 。 

格式 : 


<TABLE > 
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<CAPTION align=" 对 齐 方式 "> 表格 标题 < /CAPTION> 
<TR> 

<TH> 表 头 一 </TH><TH> 表 头 二 </TH><TH> 表 头 n< /TH> 
/Tn 
<TR> 

<TD> 表 项 一 </TD><TD> 表 项 二 </TD><TD> 表 项 n< /TD> 
</TR> 
<TR> 

<TD> 表 项 一 </TD><TD> 表 项 二 </TD><TD> 表 项 n</TD> 
</TR> 


</TABLE> 


属性 : 

(1) 二 TABLE >…</TABLE > 标记 用 来 创建 一 个 表格 ,其 主要 属性 如 下 所 示 

width: 表格 的 宽度 。 

height: 表格 的 高 度 。 

align: 表格 在 页 面 的 水 平 对 齐 方式 。 

background: 表格 的 背景 图 片 。 

bgcolor: 表格 的 背景 颜色 。 

border: 表格 边框 的 宽度 (以 像素 为 单位 ) 。 

bordercolor: 表格 边框 颜色 。 

bordercolorlight: 表格 边框 明亮 部 分 的 颜色 。 

bordercolordark: 表格 边框 昏暗 部 分 的 颜色 。 

cellspacing: 单元 格 之 间 的 间距 。 

cellpadding: 单元 格 内 容 与 单元 格 边界 之 间 的 空白 距离 的 大 小 。 

(2) <CAPTION> …</CAPTION 二 标记 表示 对 表格 标题 的 说 明 。align 属性 表 
示 标 题 相对 于 表格 的 位 置 , 取 值 为 left right center\top 和 bottom 分 别 表示 标题 在 表格 
上 部 左边 .上 部 右边 .上 部 居中 .表格 上 部 和 表格 下 部 。 

(3) 过 TR 二 …</TR 过 标记 定义 行 ,该 标记 中 间 的 内 容 显示 在 一 行 ,此 标记 对 只 能 
放 在 二 TABLE 二 …</TABLE 之 标记 之 间 使 用 ,其 主要 属性 如 下 所 示 : 

align: 行内 容 的 水 平 对 齐 。 

valign: 行内 容 的 垂直 对 齐 。 

bgcolor: 行 的 背景 颜色 。 

bordercolor: 行 的 边框 颜色 。 

bordercolorlight: 行 的 亮 边框 颜色 。 

bordercolordark: 行 的 上 暗 边框 颜色 。 

(4) 二 TH 这 和 < 二 TD 二 标记 表示 单元 格 标 记 , 这 两 个 标记 必须 符 套 在 二 TR 标记 
中 ,成 对 出 现 。 二 TH 过 > 表示 表 头 标记 , 表 头 标记 一 般 位 于 首 行 或 首 列 , 标 记 之 间 的 内 容 
就 是 位 于 该 单元 格 内 的 标题 内 容 , 其 中 的 文字 以 粗 体 居中 显示 。 二 TD 二 标记 就 是 该 单 
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元 格 中 的 具体 数据 内 容 , 二 TH 和 二 TD 二 标记 的 属性 都 是 一 样 的 ,属性 设 定 如 下 : 

width/height: 单元 格 的 宽 和 高 ,接受 绝对 值 (如 80) 及 相对 值 ( 如 80%)。 

colspan: 单元 格 向 右 打通 的 栏 数 。 

rowspan: 单元 格 向 下 打通 的 列 数 。 

align: 单元 格 中 内 容 的 位 置 (水平 ) .可 选 值 为 left, center, right。 

valign: 单元 格 中 内 容 的 位 置 (垂直 ) .可 选 值 为 top, middle. bottom。 

bgcolor: 单元 格 的 底 色 。 

bordercolor: 单元 格 边框 颜色 。 

bordercolorlight: 单元 格 边框 向 光 部 分 的 颜色 。 

bordercolordark: 单元 格 边框 背光 部 分 的 颜色 。 

background: 单元 格 背景 图 片 。 

(5) 要 创建 跨 多 行 、 多 列 的 单元 格 , 只 需 在 二 TH 或 二 TD> 中 加 入 ROWSPAN 或 
COLSPAN 属性 的 属性 值 , 表 明 表 格 中 要 跨越 的 行 或 列 的 个 数 。 

跨 多 列 的 语法 : 二 th colspan 王 “ 列 数 " 盖 二 td colspan 一 “ 列 数 "全 

colspan 表示 跨越 的 列 数 ,例如 colspan 一 2 表示 这 一 格 的 宽度 为 两 个 列 的 宽度 。 

跨 多 行 的 语法 : 二 th rowspan 一 “ 行 数 " 盖 二 td rowspan 一 “ 行 数 "全 。 

rowspan 所 要 表示 的 意义 是 指 跨越 的 行 数 ,例如 rowspan=2 就 表示 这 一 格 跨越 表 
格 两 个 行 的 高 度 。 

【实例 3-12】 表格 标记 的 简单 应 用 。 


<HTML> 
<HEAD> 
<TITLE> 表 格 标 记 < /TITLE> 
</HEAD> 
<BODY> 
<TABLE border="]1" width="360" bordercolor="#000000"> 
<CAPTION> 学 生成 绩 表 < /CAPTION> 
<TR align="center"> 
<TH> 姓 名 < /TH> 
<TH> 课 程 名 称 </TH> 
<TH> 成 绩 < /TH> 
</TR> 
<TR align="center"> 
<TD> 获 获 < /TD> 
<TD> 数 学 < /TD> 
<TD> 86</TD> 
</TR> 
<TR align="center"> 
<TD> 妮 妮 < /TD> 
<TD> 计 算 机 基础 </TD> 


<TD> 90< /TD> 
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</TR> 
<TR align="center"> 
<TD> 娜 娜 < /TD> 
<TD> 英 语 </TD> 
<TD> 82</TD> 
</TR> 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-12 所 示 。 
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图 3-12 浏览 器 显示 效果 


【实例 3-13】 表格 标记 的 复杂 应 用 。 


<HTML> 
<HEAD> 
<TITLE> 表 格 标记 的 复杂 应 用 < /TITLE> 
</HEAD> 
<BODY> 
<center> 
<TABLE border="10" widTH="80%" align="center" height="150" background 
="../../imge/b0024.gif" 
bordercolorlight="#9999FF" bordercolordark= "#9900CC"> 
<CAPTION> 学 生 信 息 表 < /CAPTION> 


<TR align="center"> 


<TH colspan= 学 生 基 本 信息 </TH> 
<TH colspan="2"> 成 绩 </TH> 
</TR> 


<TR align="center"> 
<TH> 姓 名 </TH> 
<TH> 专 业 </TH> 
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<TH> 课 程 </TH> 
<TH> 分 数 </TH> 
</TR> 
<TR align="center"> 
<TD> 著 其 < /TD> 
<TD rowspan="2"> 计 算 机 < /TD> 
<TD rowspan="2"> 程 序 设 计 < /TD> 
<TD>88</TD> 
</TR> 
<TR align="center"> 
<TD> 喃 喃 </TD> 
<TD>89</TD> 
</TR> 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-13 所 示 。 
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图 3-13 浏览 器 显示 效果 


3.5 好 媒体 标记 


在 网 页 中 加 入 多 媒体 信息 可 以 使 网 页 更 加 生动 活泼 ,下 面 介 绍 如 何 通过 HTML 标 
记 的 方法 在 网 页 中 加 入 多 媒体 信息 。 


3.5.1 图 像 标记 


在 网 页 中 加 入 适当 的 图 片 可 以 使 网 页 丰富 多 彩 , 具 有 更 强 的 吸引 力 。HTML 提供 
了 过 IMG> 标 记 来 处 理 图 像 的 输出 。 
功能 : 在 当前 位 置 插入 图 像 。 
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格式 : 


<IMG src= "文件 名 " alt= "说明" width="x" height="y" border="n" hspace="h" vspace 
="v" align=" 对 齐 方式 "> 


属性 : 

src: 指出 要 加 入 图 像 的 文件 名 , 即 * 图 像 文件 的 路 径 \ 图 像 文件 名 ”。 

alt: 在 浏览 器 尚未 完全 读 和 人 图像 时 ,在 图 像 位 置 显示 的 文字 或 者 图 像 显 示 时 鼠标 县 
停 在 图 像 上 时 所 显示 的 文字 。 

width: 宽度 (像素 数 或 百分数 ) 。 通 常 只 设 为 图 像 的 真实 大 小 以 免 失 真 , 若 需 要 改变 
图 像 大 小 最 好 事先 使 用 图 像 编 辑 工具 。 

height: 设 定 图 像 的 高 度 ( 像 素数 或 百分数 ) 。 

border: 设置 图 像 外 围 边 框 宽 度 , 其 值 为 正 整数 。 

hspace: 设置 水 平方 向 空白 (图 像 左 右 留 多 少 空白 ) 。 

vspace: 设置 垂直 方向 空白 (图 像 上 下 留 多 少 空白 ) 。 

align: 设置 图 像 在 页 面 的 位 置 ,可 以 为 left、right、top、middle 和 bottom 。 

【实例 3-14】 图 像 标记 的 应 用 。 


<HTML> 
<HEAD> 
<TITLE> 图 像 标 记 的 应 用 < /TITLE> 

</HEAD> 

<BODY> 

<P align="center"><img src="fuwa.jpg" alt=" 福 娃 欢 欢 " width=350 height=350></P> 
</BODY> 

</HTML> 

</HTML> 


浏览 器 显示 效果 如 图 3-14 所 示 。 
3.5.2 ”音频 标记 


功能 : 在 网 页 中 加 入 声音 ,声音 文件 可 以 是 *. WAV、x.AU、x.MID 等 。 
格式 : 


<BGSOUND src=" 声 音 文件 的 URL 地 址 " loop=" 播 放 次 数 "> 


属性 : src 属性 表示 声音 文件 的 存放 地 址 ,loop 控制 播放 次 数 , 取 一 1 或 者 
INFINITE 时 ,声音 将 一 直播 放 到 浏览 者 离开 该 网 页 时 为 止 。 
【实例 3-15】 音频 标记 的 应 用 。 


<HTML> 
<HEAD> 
<TITLE> 背景 声音 </TITLE> 
</HEAD> 
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3-14 浏览 器 显示 效果 


<body> 
<H4 align= "center" > 网 页 的 背景 声音 <H4> 
<HR> 


<bgsound src= "youandme .mid" LOOP= "3"> 
</BODY> 
</HTML> 


3.5.3 视频 标记 


功能 : 在 页 面 中 放置 如 SWF 动画 ( 即 Flash 动画 )、MP3 音乐 .电影 等 多 种 格式 的 多 
媒体 信息 。 
格式 : 


< EMBED src="file URL" height="value" width="value" hidden="hidden value" 

autostart="auto value" loop="loop value">< /EMBED> 

属性 如 下 。 

(1) src : 指明 多 媒体 文件 所 在 的 路 径 , 可 以 插入 的 多 媒体 文件 包括 SWF 动画 、MP3 
音乐 .MPEG 格式 的 视频 和 AVI 格式 的 视频 。 

(2) height 和 width : 设置 多 媒体 播放 的 区 域 , 取 值 为 像素 点 数 或 相对 于 窗口 的 百 
分 比 。 

(3) hidden : 用 于 控制 播放 面板 的 显示 和 隐藏 。 当 hidden 一 “True” 时 ,隐藏 面板 ; 当 
hidden 二 “False” 时 ,显示 面板 。 

(4) autostart : 用 于 控制 多 媒体 内 容 是 否 自 动 播放 。 当 auto 一 “True” 时 ,自动 播放 ; 
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当 auto 一 “False” 时 ,不 会 自动 播放 。 
于 控制 多 媒体 内 容 是 否 循 环 播 放 。 当 loop 一 “True” 时 ,无 限 次 循环 ; 当 
loop 二 “False” 时 , 仅 播 放 一 次 。 

【实例 3-16】 视频 标记 的 应 用 。 


(5) loop : 


<html> 
<body> 
<P align="center"><EMBED src="iandyou.avi" height="288" width="352" hidden 
="false" autostart= "ture" loop="1">< /EMBED><p> 
</body> 
</html> 


浏览 器 显示 效果 如 图 3-15 所 示 。 
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图 3-15 浏览 器 显示 效果 


3.6 超 链接 标记 


超 链接 是 整个 WWW 应 用 的 核心 和 基础 , 它 可 以 把 页 面 一 个 个 链接 起 来 ,使 得 网 页 
的 浏览 非常 方便 。 所 以 ,对 超 链接 的 掌握 具有 特殊 的 意义 。 

功能 : 建立 超 链接 。 

格式 : 

<A href="URL 地址 " target=" 打 开 窗 口 方式 "> 显示 的 文本 或 者 图 像 < /A> 

属性 : href 属性 设置 要 链接 到 的 目标 URL 地 址 。 在 书写 URL 时 要 注意 ,如 果 资 源 
放 在 自己 的 服务 器 上 ,可 以 写 相 对 路 径 , 否 则 ,应 写 绝对 路 径 。 

target 属性 设置 要 显示 超 链 接 内 容 的 窗口 方式 ,可 选 值 为 _blank、parent、 self、 
_top 和 框架 名 称 , 其 说 明 见 表 3-2。 
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表 3-2 超 链 接 内 容 的 窗口 显示 方式 


取 值 说 明 
target="_blank 表示 在 新 窗口 中 显示 链接 指向 的 页 面 
target="_parent" 表示 在 当前 页 面 的 父 级 框架 集中 显示 链接 页 面 
target="_self" 表示 在 当前 文档 的 框架 集中 显示 链接 页 面 
target="_top" 表示 在 链接 所 在 的 完整 窗口 中 显示 链接 页 面 


只 应 用 于 框架 中 , 若 被 设 定 则 链接 结果 将 显示 于 该 “框架 名 称 " 指 定 的 框 


IEgeE 一 权 困 和 名称” 。 | 如 窗口 中 ,框架 名 称 是 事先 由 框架 标记 所 命名 的 


1. 创建 指向 其 他 页 面 的 超 链接 

根据 目标 文件 与 当前 文件 的 目录 关系 ,有 5 种 方法 : 

(1) 链接 到 同一 目录 内 的 网 页 文件 ,其 格式 为 : 

<R href= "目标 文件 名 "> 显示 的 文本 或 者 图 像 </a> 

目标 文件 名 是 链接 所 指向 的 文件 ,此 时 URL 地 址 是 相对 路 径 。 

(2) 链接 到 下 一 级 目录 中 的 网 页 文件 ,其 格式 为 : 

<R href=" 子 目录 名 /目标 文件 名 "> 显示 的 文本 或 者 图 像 </R> 

此 时 URL 地 址 是 相对 路 径 。 

(3) 链接 到 上 一 级 目录 中 的 网 页 文件 ,其 格式 为 : 

<A href="../ 目 标 文件 名 "> 显示 的 文本 或 者 图 像 < /A> 

其 中 “.. /表示 退 到 上 一 级 目录 中 ,此 时 URL 地 址 是 相对 路 径 。 

(4) 链接 到 同 级 目录 中 的 网 页 文件 ,其 格式 为 : 

<A href="../ 子 日 录 名 /日 标 文件 名 "> 显示 的 文本 或 者 图 像 </A> 

表示 先 退 到 上 一 级 目录 中 ,然后 再 进入 目标 文件 所 在 的 目录 ,此 时 URL 地 址 是 相对 
路 径 。 

(5) 链接 到 Internet 上 的 网 页 ,其 格式 为 : 

<A href=" 网 址 "> 显示 的 文本 或 者 图 像 </A> 

网 址 采用 绝对 路 径 , 即 使 用 网 络 上 一 个 完整 的 路 径 名 称 。 

(6) E-mail 超 链接 ,其 格式 为 : 

<A href="mailto: 邮 件 地 址 "> 指向 E-mail 地 址 的 超 链 接 < /A> 

【实例 3-17】 创建 指向 其 他 页 面 的 超 链接 。 


<HTML> 
<HEAD> 


<TITLE> 创 建 指向 其 他 页 面 的 超 链接 < /TITLE> 
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</HEAD> 
<BODY> 
<H4> 同 一 目录 下 的 网 页 文件 </H4> 
<A href="3-19.html"> 同 一 目录 下 的 页 面 < /A> 
<H4> 链 接 到 Internet 上 的 网 页 < /H4> 
<A href="http://www.baidu.com" > 百度 < /A> 
<H4> 图 像 超 链接 </H4> 
<A href="http://www.sohu.com" ><IMG src="sohu.jpg"></A> 
<H4>E-mail 超 链接 </H4> 
<A href="mailto:qucc218@sohu.com.cn" >qucc 的 邮箱 < /A> 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-16 所 示 。 


当 创建 指向 其 它 页 面 的 超 链接 - 了 icrosoft Internet Explorer 
文件 四” 忽 辑 区) 查看 0 收藏 和 ) 工具 GD) 帮助 0D 


-日 国 国 扩 有 认 ex 全 -各 回 -和 昌 


地 址 轩 ]| 同 E; \ 第 03 章 实例 \3-18. htnl | 


同一 目录 下 的 网 页 文件 
同一 目录 下 的 负面 


链接 到 Internet 上 的 网 页 


图 3-16 浏览 器 显示 效果 


2. 创建 指向 本 页 面 中 的 超 链 接 

要 在 当前 页 面 内 实现 超 链接 ,需要 定义 两 个 标记 : 一 个 为 超 链接 标记 , 男 
标记 。 

超 链 接 标 记 的 格式 为 : 

<A href="# 记 号 名 "> 显示 的 文本 或 者 图 像 < /A> 

书签 标记 的 格式 为 : 

<A name=" 记 号 名 "> 日 标 文本 附近 的 字符 串 < /A> 


功能 : 单 击 显示 的 文本 或 者 图 像 , 将 跳 转 到 ”记号 名 ?开始 的 文本 。 
【实例 3-18】 创建 指向 本 页 中 的 超 链 接 。 


<HTML> 


一 个 为 书签 
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<HEAD><TITLE> 学 生 之 家 </TITLE>< /HEAD> 
<BODY link=red alink=blue vlink=green> 
<A name= "0"></R> 
<H2 align= center><B> 欢 迎 来 到 "学 生 之 家 "< /B></H2> 
<FONT size=3 color=purple><CENTER> 
<R href="#news"> 新 闻 </A> gnbsp; gnbsp; gnbsp; &nbsp; 
<A href= "#study"> 学 习 园 地 </RA> gnbsp; gnbsp; gnbsp; &nbsp; 
<A href="#health"> 健 康信 箱 </A> gnbsp; gnbsp; gnbsp; &nbsp; <P> 
< /CENTER>< /FONT> 
<A name= "news"></A> 新 闻 <BR> 
.<BR> 
<DIV align=right><A href="#0"> 返 回 </A></DIV><P> 
<A name= "study"></R> 学 习 园 地 <BR> 


<DIV align=right><A href="#0"> 返 回 </A></DIV><P> 
<A name= "health">< /A> 健 康信 箱 <BR> 


AR <BR> 
<DIV align=right><A href="#0"> 返 回 </A></DIV><P> 
</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-17 所 示 。 


文件 如 妨 可 下 ) 亚 看 WD 收 冲 以) 工具 CD) 帮助 0D 


Oi 昌国 国 的 有 ee 赤 wex 加 它 -对本 - 口 筷 季 目 


地 站 由 [加 E\ 弟 03 意 实例 \3-19 htnl 


欢迎 来 到 “学 生 之 家 ” 


图 3-17 浏览 器 显示 效果 


3.7 于 章 标记 


表单 是 实现 动态 网 页 的 一 种 主要 的 外 在 形式 ,是 HTML 页 面 与 浏览 器 端 实现 交互 
的 重要 手段 。 它 的 主要 功能 是 收集 信息 , 当 单 击 表单 中 的 提交 按钮 时 ,输入 在 表单 中 的 
信息 就 会 从 客户 端的 浏览 器 上 传 到 服务 器 中 ,然后 由 服务 器 中 的 有 关 表 单 处 理 程序 
(ASP、CGI 等 程序 ) 进 行 处 理 , 处 理 后 再 将 用 户 所 需 信息 传送 到 客户 端 浏 览 器 上 ,这 样 网 
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页 就 具有 了 交互 性 。 在 这 里 只 介绍 如 何 使 用 HTML 的 表单 标记 来 设计 表单 。 
1. 二 FORM 二 一 /FORM 二 标记 


功能 : 二 FORM> 过 /FORM~ 标 记 用 来 创建 一 个 表单 , 即 定义 表单 的 开始 与 结束 位 置 。 
格式 : 


<FORM name="form name" method= "method" action= "url">**< /FORM> 


属性 : name 属性 设置 表单 的 名 称 。 

method 属性 用 于 指出 ,采用 何 种 HTTP 方法 来 发 送 表单 数据 (表单 数据 将 被 发 送 给 

action 属性 所 指定 的 URL 处 理 )。 表 单数 据 可 以 采用 HTTP GET 方法 (method = 
"get") 发送 ,也 可 以 采用 HTTP POST 方法 (method 王 "post") 发 送 。 
) GET 方法 :此 方法 把 表单 数据 以 名 值 的 形式 附加 到 URL 上 ;采用 此 方法 提交 表 
单 后 ,其 结果 页 面 的 URL 可 被 收藏 (URL 里 包含 有 相关 参数 ) ,以 便 今后 再 次 访问 ; 受 
URL 长 度 限制 (不 同 浏览 器 有 所 差异 ) ,此 方法 不 能 提交 超过 一 定量 的 数据 。 因 此 , 当 数 
据 过 多 时 ,你 难以 确保 所 有 数据 都 能 被 正确 发 送出 去 。 

(2) POST 方法 :采用 POST 方法 提交 表单 ,其 结果 页 面 的 URL 是 无 法 收藏 的 
(URL 里 不 含有 相关 参数 ) ;POST 方法 比 GET 方法 更 健壮 、 更 安全 ,而 且 POST 方法 对 
数据 大 小 没有 限制 。 

action 属性 用 来 定义 表单 处 理 程序 的 位 置 及 名 称 。 如 二 FORM? action 一 "counter. 
asp" 二 , 当 用 户 提交 表单 时 ,服务 器 将 执行 名 为 counter. asp 的 asp 程序 。 


2. 一 INPUT type 王 "" 二 标记 


功能 : 输入 标记 二 INPUT > 二 是 表单 中 最 常用 的 标记 之 一 。 该 标记 用 来 定义 一 个 输 
入 区 ,可 在 其 中 输入 信息 ,此 标记 必须 放 在 二 FORM 放 二 /FORM 二 标记 对 之 间 。 
格式 : 
<INPUT name= "field name" type="type_name"> 
属性 : name 属性 设置 输入 区 域 的 名 称 , 服 务 器 就 是 通过 name 来 获得 该 区 域 数 据 的 。 
type 属性 设置 输入 区 域 的 类 型 ,常用 的 type 属性 值 如 表 3-3 所 示 。 
表 3-3 type 常用 属性 值 


type 属性 值 及 格式 说 明 
< 一 INPUT type 二 "Text”maxlength 二 "" | 单行 输入 文本 区 域 。maxlength 为 文本 域 的 最 大 输入 字符 
size="" value=""> 数 ;size 为 文本 域 的 宽度 ;value 设置 文本 域 的 默认 值 


<INPUT type= "Password"> 输入 密码 域 


文件 域 可 以 让 用 户 在 域 的 内 部 填写 自己 硬盘 中 的 文件 路 


<INPUT type= "File"> 径 ,然后 通过 表单 上 传 


二 INPUT type 二 "Checkbox”checked | 一 个 复 选 框 。checked 表示 此 项 被 默认 选中 


< 一 INPUT type= "Radio" checked> 单 选 按钮 框 。checked 表示 此 项 被 默认 选中 


<INPUT type="Button" > 普通 按钮 。 主 要 是 用 来 配合 程序 的 需要 来 进行 表单 的 处 理 
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续 表 


type 属性 值 及 格式 说 明 


<INPUT type= "Submit" value=""> 


单 击 “ 提 交 ” 按 钮 后 ,可 以 实现 表单 内 容 的 提交 


一 INPUT type= "Reset" value= 


单 击 “ 重 置 "按钮 后 ,可 以 清除 表单 的 内 容 ,恢复 默认 的 表单 
内 容 设 定 


一 INPUT type="IMAGE" sre 


使 用 图 像 代替 按钮 的 功能 。src 设置 图 片 的 路 径 


一 INPUT type="Hidden"> 


隐藏 输入 域 , 用 户 不 能 在 其 中 输入 ,用 来 预 设 某 些 要 传送 
的 信息 


【实例 3-19】 表单 输入 标记 示例 。 


<HTML> 
<HERD> 

<TITLE> 表 单 输入 标记 示例 < /TITLE> 

</HEAD> 

<BODY> 

<H1> 用 户 信 息 调 查 </H1> 

<FORM ACTION=mailto:qucc218@ sohu.com METHOD= get NAME= invest> 

姓名 :<INPUT TYPE="text" NAME="username" SIZE=20><BR> 

网 址 :<INPUT TYPE="text" NAME="URL" SIZE=20 MAXLENGTH= 50 VALUE= "http://"><BR> 
密码 :<INPUT TYPE="password" NAME="password" SIZE=20 MAXLENGTH=8><BR> 

确认 密码 :<INPUT TYPE= "password" NAME="password confirm" SIZE=20 MAXLENGTH= 8> 
<BR> 

请 上 传 你 的 照片 :<INPUT TYPE="file" NAME="File"><BR> 

请 选择 你 喜欢 的 音乐 : 

<INPUT TYPE= "Checkbox" NAME= "M1" VALUE="rock" checked> 摇 滚 乐 

<INPUT TYPE= "Checkbox" NAME= "M2" VALUE="jazz"> 尔 士 乐 

<INPUT TYPE= "Checkbox" NAME= "M2" VALUE="pop"> 流 行乐 <BR> 

请 选择 你 居住 的 城市 : 

<INPUT TYPE= "Radio" NAME="city" VALUE="beijing" checked> 北 京 

<INPUT TYPE= "Radion city" VALUE="shanghai"> 上 海 

<INPUT TYPE= "Radio" NAME="city" VALUE="nanjing"> 南 京 <BR> 

<INPUT TYPE= "Image" NAME="Image" SRC= "chengshi .jpg"><BR> 

<INPUT TYPE= "Hidden" NAME= "Form name" VALUE="Invest"> 

<INPUT TYPE= "Button" NAME= "button" VALUE= "普通 按钮 "> 

<INPUT TYPE= "Submit" NAME="Submit" VALUE=" 提 交 表 单 "> 

<INPUT TYPE= "Reset" NAME= "Reset" VALUE= " 重 置 表单 "> 

</FORM> 


</BODY> 
</HTML> 


浏览 器 显示 效果 如 图 3-18 所 示 。 
3. 一 SELECT 一 /SELECT 和 二 OPTION 二 标记 


功能 : 二 SELECT 二 </SELECT 标记 用 来 创建 一 个 下 拉 列 表 框 或 可 以 复 选 的 列 
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时 表 单 答 入 标记 示例 - Hicrosoft Internet Explorer 
文件 中 编 竹 E) 查看 四 收 豪 和 ) 工具 中 帮助 如 


Be -日 - 国 国 的 Pe 次 emx @| 合 - 屋 回 


关 \ 弟 9 章 实 全 3-20 hl 


用 户 信息 调查 


姓名 ， 
网 址 ， [http:M 


GE |] 
请 选择 你 喜欢 的 音乐 _ 回 摇滚乐 日 楼 士 乐 口 流行 乐 
请 选择 你 居住 的 城市 。 @@ 北 京 口上 海 口 南京 


3-18 浏览 器 显示 效果 


表 框 ， 它 交 须 放 在 <PORM></FORM> 标 名 六 它 间 ， 过 OPTION 二 标记 用 来 指定 菜 
单 和 列表 中 的 一 个 选项 , 它 放 在 <SELECT> 一 /SELECT 标记 对 之 间 。 
格式 : 


<SELECT name="name" size="value" multiple> 
<OPTION value= "value" selected> 选 项 一 
<OPTION value= "value"> 选 项 二 … 


</select> 


二 SELECT 帮 属性 : name 属性 设置 菜单 和 列表 的 名 称 ; size 属性 设置 显示 的 选项 数 
目 ;multiple 属性 不 用 赋值 可 直接 加 入 到 标记 中 ,加 入 此 属性 后 列表 框 就 成 了 可 多 选 的 
了 。 若 没有 加 入 multiple 属性 ,显示 的 将 是 一 个 弹出 式 的 列表 框 。 

<OPTION> 属 性 : value 属性 用 来 给 OPTION> 指 定 的 那 一 个 选项 赋值 ,这 个 值 
是 要 传送 到 服务 器 上 的 ,服务 器 正 是 通过 调用 二 SELECT 二 区 域名 字 的 we 属性 来 获 
得 该 区 域 选 中 的 数据 项 。Selected 属性 指定 初始 默认 的 选项 。 

【实例 3-20】 表单 菜单 和 列表 标记 的 应 用 。 


<HTML> 

<HEAD> 

<TITLE> 表 单 菜单 和 列表 标记 示例 </TITLE> 

</HEAD> 

<BODY> 

<H1> 用 户 信息 调查 </H1> 

<FORM ACTION=mailto:qucc218@ sohu.com METHOD= get NAME= inVest> 
请 选择 你 喜欢 的 体育 项 目 :<BR> 


<SELECT NAME="sport" SIZE=4 MULTIPLE> 


S32 趋 文 本 标记 语言 HTML 


29 


<OPTION Value="football" Selected> 足 球 
<OPTION Value= "basketbal1"> 篮 球 
<OPTION Value= "pingpong"> 乒 乓 球 
<OPTION Value= "tennisball"> 网 球 
</SELECT> <BR> 

请 选择 你 居住 的 城市 :< BR> 

<SELECT NAME="city"> 

<OPTION Value="beijing" Selected> 北 京 
<OPTION Value="shanghai"> 上 海 

<OPTION Value= "nanjing"> 南 京 

<OPTION Value= "guangzhou"> 广 州 
</SELECT> 

<INPUT TYPE= "Submit"” NAME="Submit" VALUE= "提交 表 单 "> 
</FORM> 

</BODY> 

</HTML> 


浏览 器 显示 效果 如 图 3-19 所 示 。 


当 表单 菜单 和 列表 标记 示例 -Wicrosoft Internet Explorer 
文件 四 ” 锦 模 EE) 查看 WD 收藏) 工具 0D) 帮助 0D 


Ga 日 .四国 Pe 妇 mx @ 人- 电 


全 证 03 辣 实例 \3-21 ht 


地 址 名 


用 户 信 息 调查 


请 选择 你 喜欢 的 体育 项 目 ， 


图 3-19 浏览 器 显示 效果 


4. 二 TEXTAREA 二 一 /TEXTAREA 二 标记 


功能 : <TEXTAREA 二 一 /TEXTAREA> 用 来 创建 一 个 可 以 输入 多 行 的 文本 框 ， 


可 以 在 其 中 输入 更 多 的 文本 ,此 标记 放 在 FORM 二 /FORM 二 标记 对 之 间 。 


格式 : 
<TEXTAREA name= "name" rows="value" cols="value"></TEXTAREA> 


属性 : name 属性 设置 文本 框 的 名 称 。 
rows 属性 设置 文本 框 的 行 数 ,以 字符 数 为 单位 。 
cols 属性 设置 文本 框 的 列 数 ,以 字符 数 为 单位 。 
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【实例 3-21】 表单 文本 框 标记 的 应 用 。 


<HTML> 

<HEAD> 

<TITLE> 表 单 文本 框 标 记 示 例 < /TITLE> 

</HEAD> 

<BODY> 

<H1> 用 户 信息 调查 < /H1> 

<FORM ACTION=mailto:songsong@ 5lvc.com METHOD= get NAME= invest> 
请 留言 :<BR> 

<TEXTAREA NAME= "comment" Rows=5 Cols=40> 
</TEXTAREA> <BR> 

<INPUT TYPE= "Submit" NAME= "Submit" VALUE=" 提 交 表 单 "> 
</FORM> 

</BODY> 

</HTML> 


浏览 器 显示 效果 如 图 3-20 所 示 。 


导 表 单 文本 框 标记 示例 - Microsoft Internet Explorer 
文件 端 匈 GO 查看 轨 收藏 工具 0) 帮助 中 


-昌国 国 入 有 六 如 全 -总 回 - 下 外 


地 址 国 ] | 加 E:\ 弟 03 章 实例 \3-22 htnl 


用 户 信 息 调查 


请 留言 ， 


图 3-20 浏览 器 显示 效果 


3.8 框架 标记 


框架 的 作用 就 是 把 浏览 器 窗口 划分 成 几 个 子 窗口 ,每 个 子 窗口 可 以 调 人 各 自 的 
HTML 文档 形成 不 同 的 页 面 ,也 可 以 按照 一 定 的 方式 组 合 在 一 起 完成 特殊 的 效果 。 框 
架 通 常 的 使 用 方法 是 在 一 个 框架 中 放置 目录 并 设置 链接 ,点 击 链接 ,内 容 显示 在 另 一 个 
框架 中 ;或 者 有 时 一 个 网 页 的 不 同 部 分 由 不 同 的 人 员 制 作 , 可 以 每 人 完成 一 个 子 窗 口 , 然 
后 利用 框架 技术 将 它们 合并 在 一 起 形成 一 个 完整 的 页 面 。 

框架 主要 包括 两 个 部 分 : 框架 集 和 框架 。 框 架 集 是 在 一 个 文档 内 定义 的 一 组 框架 结 
构 的 HTML 网 页 。 框 架 集 定义 了 在 一 个 窗口 中 显示 的 框架 数 、 框 架 的 尺寸 . 载 和 人 到 框架 
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的 网 页 等 。 框 架 是 指 在 网 页 上 定义 的 一 个 显示 区 域 。 在 使 用 了 框架 集 的 页 面 中 ,页 面 的 
< 氨 BODY> 标 记 被 框架 集 二 FRAMESET> 标 记 所 取代 ,然后 通过 框架 <FRAME 之 标记 
定义 每 一 个 框架 。 


1. 一 FRAMESET 二 一 /FRAMESET 标 记 


功能 : 定义 分 割 窗口 , 即 定义 主 文档 中 有 几 个 框架 并 且 各 个 框架 是 如 何 排列 的 。 
格式 : 


< FRAMESET cols="value,value,**" rows="value, value,"**" framespacing="value" 
bordercolor= "Color_value">…</FRRMESET> 


属性 : cols 属性 与 rows 属性 分 别 表示 左右 和 上 下 分 割 窗口 (用 ",” 分 割 , value 为 定 
义 各 个 框架 的 宽度 值 ,单位 可 以 是 百分比 、 绝 对 像素 值 或 星 号 * * ”, 其 中 星 号 表示 剩余 部 
分 )。 

framespacing: 设 定 框架 集 的 边框 宽度 。 

bordercolor: 设 定 框架 集 边框 颜色 。 

下 面 是 几 种 框架 集 的 应 用 。 

二 FRAMESET rows 一 “ x, * , * ”之 表示 总 共有 三 个 按 行 排列 的 框架 ,每 个 框架 占 
整个 浏览 器 窗口 高 度 的 1/3。 

二 FRAMESET cols 一 “40%,* ,* ”之 表示 总 共有 三 个 按 列 排列 的 框架 ,第 一 个 框 
架 占 整个 浏览 器 窗口 宽度 的 40% , 剩 下 的 空间 平均 分 配给 另外 两 个 框架 。 

二 FRAMESET rows 一 “40% ,* ”cols 一 “50%% , * ,200" 之 总 共有 六 个 框架 ,先是 在 
第 一 行 中 从 左 到 右 排列 三 个 框架 ,然后 在 第 二 行 中 从 左 到 右 再 排列 三 个 框架 , 即 两 行 三 
列 ,所 占 空 间 依据 rows 和 cols 属性 的 值 而 定 ,其 中 200 的 单位 是 像素 。 


2. 一 FRAME 二 标记 


功能 : 定义 某 一 个 具体 的 框架 。 
格式 : 


<FRAME src="File NAME" name="Frame_NAME" scrolling="value" noresize>***</FRAME> 


属性 : src 属性 设置 框架 显示 的 文件 路 径 。 

name 属性 定义 此 框架 的 名 字 ,这 个 名 字 是 供 超 文 本 链接 标记 二 A href 一””target 一 
“” 二 中 的 target 属性 用 来 指定 链接 的 目标 HTML 文件 将 显示 在 哪 一 个 框架 中 。 框 架 的 
命名 有 一 定 的 规则 ,框架 名 称 必须 是 单个 单词 .可 以 使 用 下 划 线 (_) ,但 不 允许 使 用 连 字 
符 ( 一 ) ,句号 (。) 和 空格 。 框 架 名 称 必须 以 字母 开始 。 框 架 名 称 区 分 大 小 写 。 

scrolling 属性 设 定 滚动 条 是 否 显示 , 值 可 以 是 yes( 显 示 )、no( 不 显示 ) 或 auto( 若 需 
要 则 会 自动 显示 ,不 需要 则 自动 不 显示 )。 

noresize 属性 禁止 改变 框架 的 尺寸 大 小 。 
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3. 二 NOFRAME 二 二 /NOFRAME 二 标记 


<NOFRAMES><</NOFRAMES> 标 记 对 放 在 <FRAMESET></FRAMESET> 标 
记 对 之 间 ,用 来 在 那些 不 支持 框架 的 浏览 器 中 显示 文本 或 图 像 信 息 。 
【实例 3-22】 框架 的 综合 应 用 。 


main.html ( 主 文档 ) 

<HTML> 

<HEAD> 

<TITLE> 框 架 标记 综合 示例 < /TITLE> 

</HEAD> 

<frameset cols="25%, * "> 

<frame src="menu.html" scrolling="no" name="left"> 
<frame src="pagel.html" scrolling="auto" name="main"> 
<noframes> 

<BODY> 

<P> 对 不 起 ,您 的 浏览 器 不 支持 "框架 "!< /P> 

</BODY> 

</noframes> 

</frameset> 

</HTML> 

menu.html 

<HTML> 

<HEAD> 

<TITLE> 目 录 </TITLE> 

</HEAD> 

<BODY> 

<center> 

<P><FONT color="#FF0000"> 日 录 </FONT></P> 

<P><a Href="pagel.html" target="main"> 链 接 到 第 一 页 < /a></P> 
<P><a Href= "page2.html" target="main"> 链 接 到 第 二 页 </a></P> 
</center> 

</BODY> 

</HTML> 

Pagel.html 

<HTML> 

<HEAD> 

<TITLE> 第 一 页 < /TITLE> 

</HEAD> 

<BODY> 

<P align="center"><FONT color="#8000FF"> 这 是 第 一 页 !</FONT>< /P> 
</BODY> 
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</HTML> 

Page2.html 

<HTML> 

<HEAD> 

<TITLE> 第 二 页 < /TITLE> 

</HEAD> 

<BODY> 

<P align="center"><FONT color="#FF0080"> 这 是 第 二 页 !< /FONT>< /P> 
</BODY> 

</HTML> 


浏览 器 显示 效果 如 图 3-21 所 示 。 


时 框架 标记 综合 示例 - 了 icrosoft Internet Explorer 
文件 @) 编辑 E) 查看 WD 收藏 和 ) 工具 帮助 人 D 


a- 日 - 国 国 久 时 交 mx 如 从 -总 回 -中 8 


闻 回 9 到 ai” 


图 3-21 浏览 器 显示 效果 


3.9 本 章 小 结 


HTML 语言 是 网 页 制作 的 一 种 规范 ,一 种 标准 ,是 网 站 开发 和 网 页 设计 的 最 基本 知 
识 , 几 乎 所 有 的 网 页 都 是 以 HTML 规范 书写 的 , 它 通过 标识 符 来 标记 网 页 的 各 个 部 分 。 

本 章 首 先 介 绍 了 HTML 语言 的 基本 概念 、 基 本 结构 和 基本 语法 规则 ,然后 重点 介绍 
了 使 用 HTML 制作 网 页 时 各 种 标记 的 使 用 方法 ,主要 包括 文字 与 段落 标记 、 列 表 标记 、 
表格 标记 多 媒体 标记 、 超 链接 标记 、 表 单 标 记 和 框架 标记 。 熟 练 掌 握 这 些 标记 的 使 用 ， 
将 为 网 页 的 设计 打下 良好 的 基础 。 


3.10 忆 题 


一 、 填 空 题 
1. HTML 不 是 一 种 编程 语言 而 是 一 种 描述 性 的 标记 语言 , 它 通过 来 标识 
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网 页 中 内 容 的 显示 方式 。 
2. HTML 网 页 文件 主要 由 和 两 部 分 内 容 构 成 。 
3. HTML 中 用 标记 强制 换行 。 
4. 概括 起 来 ,文档 的 链接 路 径 主要 有 和 种 形式 。 
5 标记 用 来 创建 一 个 表单 , 即 定 义 表单 的 开始 与 结束 位 置 。 
二 、 实 训 题 


1. 编写 代码 实现 一 个 最 基本 的 网 页 ,页面 输出 *hello world!1”, 效 果 如 图 3-22 所 示 。 
2. 编写 代码 实现 图 3-23 浏览 器 显示 效果 ,熟悉 段落 .换行 ,标题 等 基本 标记 。 
3. 编写 代码 实现 图 3-24 浏览 器 显示 效果 ,熟悉 列表 、 超 链接 等 标记 。 


文件 (| 。” 编 铝 (E) 查看 V) 收藏 夫 (” 


x [WR] ~ 


图 3-22 浏览 器 显示 效果 图 3-23 浏览 器 显示 效果 图 3-24 浏览 器 显示 效果 


4. 编写 代码 实现 图 3-25 浏览 器 显示 效果 ,熟悉 表格 及 相关 标记 。 
5. 编写 代码 实现 图 3-26 浏览 器 显示 效果 ,熟悉 表单 及 相关 标记 。 


加 宙 合 国 国 [vw 
UL Mcrosoh 网 站 中 对 于 于 宇 的 站 上 eae CMSNcom 


密码 验证 ， | 
请 上 传 你 的 照片 [ jC) 

请 选择 你 豆 欢 的 音乐 回 插 滨 乐 口 如 士 乐 口 流行 乐 
请 选择 你 居住 的 城市 ， @@ 北京 O 〇 上海 〇 南京 


学 生 信息 表 
[编号 [姓名 [性 别 | ” 院 系 | 专业 
Pool 了 苹 三 | 于 [信和 工程 学 院 。 软件 工程 
oo 陵 四 加 ” 六 学 院 区 语言 文学 


。 财 计 算 只 | 保护 异 式 糯 用 广 ” 导 105% ”| 


ET 


图 3-25 浏览 器 显示 效果 图 3-26 浏览 器 显示 效果 
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“北京 奥运 吉祥 物 一 福娃 "网 站 的 静态 设计 


根据 客户 的 需求 ,网 站 开发 者 撰写 完 网 站 策划 书 , 准 备 好 网 站 所 需要 的 素材 之 后 , 首 
先 应 该 对 网 站 进行 静态 设计 。 

本 章 将 结合 前 面 所 学 的 知识 ,承接 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 策划 书 和 “北京 
奥运 吉祥 物 一 一 福娃 ”站 点 的 建立 与 配置 ,主要 讲述 了 使 用 Adobe Dreamweaver CS3 对 
“北京 奥运 吉祥 物 一 一 福娃 ”网 站 静态 设计 的 步骤 、 方 法 和 技巧 。 

另外 ,在 实例 的 讲解 过 程 中 ,对 Adobe Dreamweaver CS3 中 的 常用 知识 点 进行 介绍 
和 总 结 。 


4.1 使 用 麦 格 布局 网 下 主页 


在 编辑 网 页 前 应 该 首先 对 网 页 进行 整体 布局 设置 ,合理 的 布局 使 网 页 看 起 来 美观 大 
方 ,并 且 便 于 网 页 元 素 的 插入 与 编辑 。 表 格 是 进行 网 页 布局 的 强 有 力 的 工具 ,但 是 使 用 
表格 的 标准 模式 进行 布局 不 太 方便 ,因为 传统 意义 上 的 表格 是 用 来 显示 表格 数据 的 ,而 
不 是 用 于 对 Web 页 面 进行 布局 的 。 为 了 简化 使 用 表格 进行 页 面 布局 的 过 程 ， 
Dreamweaver 为 用 户 提供 了 布局 模式 ,在 布局 模式 中 ,用 户 可 以 使 用 表格 作为 基础 结构 
来 设计 网 页 ,避免 了 使 用 传统 的 方法 创建 时 经 常 出 现 的 一 些 问题 。 

下 面 以 如 图 4-1 所 示 的 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 主页 草图 和 最 终 效 果 图 为 参 
考 标准 ,介绍 使 用 表格 布局 网 站 主页 的 具体 步骤 : 


Logo 区 
Se 主页 头 部 
网 站 导航 区 
网 站 banner 
图 片 新 闻 区 福娃 动态 
公告 栏 
页 主体 
福娃 简介 (图 片 ) 福娃 揭秘 
精彩 图 片 名 人 说 福娃 | ”投票 调查 
版 权 区 主页 底部 


4-1(a) 网 站 主页 草图 
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图 4-1(b) 网 站 主页 效果 图 


4.1.1 布局 主页 头 部 


(1) 新 建 空白 网 页 ,并 命名 为 index. html。 

(2) 将 “插入 工具 栏 ”切换 到 “布局 "插入 栏 ,选择 “查看 ">" 表格 模式 ”一 “布局 模式 ” 
命令 进入 布局 视图 。 此 时 “布局 "插入 栏 中 的 “布局 表格 "按钮 误 和 "绘制 布局 单元 格 " 盈 
按钮 被 激活 ,如 图 4-2 所 示 。 

这 两 个 按钮 被 激活 
Tv 插入 常用 布局 囊 单 | 数据 | Spry | 文本 | 收藏 严 - . 
EE]| 深 ] 甸 丢 | 儿 图 加 区 | 国志 三 训 才 回国 -| 牌 司 | 
图 4-2 切换 到 “布局 "视图 


(3) 单 击 “ 布 局 表格 "按钮 稳 , 鼠标 光标 变 为 “十 "形状 ,将 光标 定位 到 编辑 窗口 左上 
角 , 然 后 按 住 鼠标 左 键 不 放 拖 动 ,到 合适 的 位 置 后 释放 鼠标 。 

(4) 单 击 边框 线 选 中 布局 表格 ,在 “属性 ?面板 中 设置 其 宽度 和 高 度 分 别 为 1260 像素 
和 181 像素 ,如 图 4-3 所 示 ,此 表格 用 来 布局 网 站 头 部 信息 。 


加 布局 表格 宽 @ 国 十 ”zso ] 襄 fel | 填充 ”|] 和 居 关 加 | 无 国 
〇 B 动 伸展 青 有 了 |] 间距 和 |] % 回 


4-3 ”设置 布局 表格 属性 


(5) 单 击 “ 布 局 单元 格 ” 按 钮 置 .将 鼠标 光标 定位 于 布局 表格 左上 角 , 然 后 按 住 鼠 标 
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左 键 不 放 拖 动 , 至 布局 表格 合适 的 位 置 后 释放 鼠标 。 

(6) 单 击 新 绘制 布局 单元 格 的 边框 线 将 布局 单元 格 选中 ,在 属性 面板 中 设置 其 宽度 
和 高 度 分 别 为 154 像素 和 130 像素 。 

使 用 相同 的 方法 在 第 一 个 单元 格 的 右 侧 分 别 绘制 952X130 像素 和 154X130 像素 
的 两 个 单元 格 , 这 三 个 单元 格 用 来 做 网 站 的 Logo 区。 

(7) 使 用 相同 的 方法 ,在 第 一 行 的 下 方 绘制 一 个 1260 X 37 像素 的 布局 单元 格 ,用 来 
做 网 站 的 导航 区 。 

(8) 使 用 相同 的 方法 ,在 第 二 行 的 下 方 再 绘制 一 个 1260 X14 像素 的 布局 单元 格 , 用 
来 做 网 站 头 部 和 网 站 主体 的 分 割 区 。 

主页 头 部 的 布局 过 程 系列 图 如 图 4-4 所 示 。 到 此 ,网 站 的 头 部 布局 绘制 完成 。 


| Logo 区 


图 4-4 主页 头 部 的 布局 系列 图 


4.1.2 布局 主页 主体 


(1) 在 网 站 头 部 表格 的 下 方 ,绘制 一 个 1260 X 809 像素 的 布局 表格 用 来 放置 网 站 的 
主体 内 容 , 如 图 4-5 所 示 。 

(2) 在 主体 布局 表格 中 从 左 到 右 并 列 绘制 三 个 大 小 分 别 为 154X 809 像素 .952X 809 
像素 和 154X 809 像素 的 布局 表格 ,将 主体 布局 表格 分 为 三 部 分 ,其 中 左右 表格 用 来 布局 
页 面 ,而 中 间 的 表格 用 来 放置 网 站 的 相关 信息 .如 图 4-6(a) 所 示 。 

(3) 在 中 间 的 布局 表格 中 ,从 上 到 下 依次 绘制 952 X280 像素 .952X 9 像素 、952 Xx 
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图 4-5 主页 主体 布局 表格 


图 4-6(a) 主页 信息 区 整体 布局 


225 像素 .952X9 像素 和 952X286 像素 的 五 个 布局 表格 ,如 图 4-6(b) 所 示 。 

(4) 在 952X280 像素 的 布局 表格 中 ,从 左 到 右 依次 绘制 340X280 像素 .15X 280 像 
素 、325X280 像素 、15 X 280 像素 的 四 个 布局 表格 。 然 后 在 最 右 侧 从 上 到 下 依次 绘制 
257X65 像素 .257X9 像素 和 257X206 像素 的 三 个 布局 表格 。 其 中 15 X 280 像素 的 两 
个 表格 和 257X9 像素 的 一 个 表格 用 来 分 割 网 站 的 各 个 信息 区 ,其余 表 格 用 来 分 别 放置 
网 站 的 图 片 新 闻 、 福 娃 动态 .网 站 banner 和 公告 栏 信息 ,如 图 4-7 所 示 。 
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图 4-6(b) 主页 信息 区 整体 布局 


图 4-7 布局 主页 信息 区 的 第 一 行内 容 


(5) 单 击 * 布 局 单元 格 ? 按 钮 颖 ,在 福娃 动态 布局 表格 内 从 上 到 下 依次 绘制 325X 38 
像素 和 325X242 像素 的 两 个 布局 单元 格 。 

使 用 相同 的 方法 在 公告 栏 布 局 表格 内 从 上 到 下 依次 绘制 257 X49 像素 和 257X 157 
像素 的 两 个 布局 单元 格 , 如 图 4-8 所 示 。 


图 4-8 布局 福娃 动态 和 公告 栏 
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(6) 使 用 相同 的 方法 ,在 952X 225 像素 的 布局 表格 内 从 左 到 右 依 次 绘制 680 X 225 
像素 .15X225 像素 和 257X225 像素 的 三 个 布局 表格 。 其 中 15X225 像素 的 表格 用 来 分 
隔 信 息 区 ,其 他 表格 用 来 放置 福娃 简介 和 福娃 揭秘 ,如 图 4-9 所 示 。 


图 4-9 布局 主页 信息 区 


(7) 单 击 “ 布 局 单元 格 "按钮 里 ,在 福娃 简介 布局 表格 内 从 上 到 下 依次 绘制 680 X 31 
像素 和 680X194 像素 的 两 个 布局 单元 格 : 使 用 相同 的 方法 在 福娃 揭秘 布局 表格 内 从 上 
到 下 依次 绘制 257X42 像素 和 257X183 像素 的 两 个 布局 单元 格 ,如 图 4-10 所 示 。 


图 4-10 布局 福娃 简介 和 福娃 揭秘 


(8) 使 用 相同 的 方法 ,在 952X286 像素 的 布局 表格 内 ,从 左 到 右 依次 绘制 341 X 286 
像素 .15X286 像素 .324X286 像素 、15X286 像素 和 257X286 像素 的 五 个 布局 表格 。 其 
中 15X280 像素 的 表格 用 来 分 割 网 站 的 各 个 信息 区 ,其 余 表格 分 别 用 来 放置 精彩 图 片 、 
名 人 说 福娃 、 投 票 调查 ,如 图 4-11 所 示 。 

(9) 单 击 “ 布 局 单元 格 ” 按 钮 峰 , 在 精彩 图 片 布局 表格 内 从 上 到 下 依次 绘制 341X 33 
像素 和 341X253 像素 的 两 个 布局 单元 格 。 

使 用 相同 的 方法 在 “名 人 说 福娃 ”布局 表格 内 从 上 到 下 依次 绘制 324X 33 像素 和 
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图 4-11 布局 主页 信息 区 


324X253 像素 的 两 个 布局 单元 格 ;在 “投票 调查 ”布局 表格 内 从 上 到 下 依次 绘制 257 X40 
像素 和 257X246 像素 的 两 个 布局 单元 格 ,完成 网 页 主体 的 布局 ,如 图 4-12 所 示 。 


图 4-12 主页 主体 布局 


4.1.3 布局 主页 底部 


在 网 站 主体 的 下 方 绘制 一 个 1260X 148 像素 的 布局 表格 ,接着 单 击 “布局 单元 格 ” 按 
钮 盈 , 在 此 布局 表格 中 ,从 左 到 右 分 别 绘制 154X 148 像素 .952X148 像素 和 154X 148 
像素 的 三 个 布局 单元 格 , 最 终 完成 网 页 的 整体 布局 ,如 图 4-13 所 示 。 
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名 人 说 福娃 


版 权 区 


图 4-13 主页 整体 布局 效果 


4.2 设计 至 页 


网 页 布局 完成 之 后 ,设计 者 应 对 网 页 进行 详细 的 编辑 ,包括 设置 页 面 属性 、 设 置 表格 
属性 \ 插 入 网 页 对 象 以 及 必要 的 编排 等 。 


4.2.1 设置 网 页 属性 


1. 设置 网 页 标题 


网 页 标题 是 用 来 说 明 网 页 主要 内 容 的 文字 ,通常 显示 在 浏览 器 窗口 的 标题 栏 中 。 每 
个 网 页 都 应 该 有 一 个 简明 扼要 的 标题 ,而 网 页 标题 文字 最 好 能 够 恰如其分 地 描述 网 页 的 
主要 内 容 。 设 置 网 页 标题 的 方法 如 下 : 
(1) 方法 一 : 打开 FuWa 目录 下 的 index. html 文档 ,在 文档 工具 栏 的 “标题 "文本 框 
中 输入 “北京 奥运 吉祥 物 一 一 福娃 ”作为 网 页 标题 ,如 图 4-14 所 示 。 
i 区 | 国 设计 | ， 标 题 : E 风 二 二 衬 移入 寿 。] 妈 . 加 .| C 国 . 矶 - | be 所 相机 面 | 
图 4-14 ”通过 "文档 工具 栏 "输入 网 页 标题 


(2) 方法 二 : 在 菜单 栏 中 选择 “修改 ”>“ 页 面 属性 ”命令 ,弹出 “页 面 属性 ”对 话 框 ,在 
“分 类 ”列表 框 中 选择 “标题 /编码 "选项 .然后 在 右 侧 的 “标题 "文本 框 中 输入 网 页 的 标题 ， 
如 图 4-15 所 示 。 
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标题 四) 
文档 类 型 0rD); [mm 1.0 Transitional ” 国 | 


编码 人 ): | 简体 中 文 G82312) 国 


Unicode 标准 化 表单 E)， | 本 项 范 闻 机 天 后 跟 规范 总 环 ) | 


口 包括 Wnicede 签名 (Bo) 人 G) 


文件 文件 夹 ; FE:\Fuga\ 
站 点 文件 买 : EE \Fuma\ 


4-15 ”通过 “页 面 属性 ”对 话 框 输入 网 页 标题 


2. 设置 网 页 的 其 他 属性 


如 果 需 要 设置 网 页 的 其 他 属性 , 则 可 以 打开 “页 面 属性 ”对 话 框 进行 设置 ,此 对 话 框 
的 主要 功能 如 下 : 

(1) 外 观 。 在 “分 类 ”列表 中 选择 “外 观 ” 选 项 , 则 右 侧 信息 主要 用 于 设置 网 页 基本 页 
面 布局 ,包括 页 面 字体 、 字 体 大 小 、 文 本 颜色 、 背 景 颜色 、 背 景 图像 、 左 边 距 、 右 边 距 、 上 边 
距 和 下 边 距 等 。 

本 实例 中 设置 页 面 字体 为 “宋体 “大 小 为 14 像素 .左边 距 为 0 像素 .上 边 距 为 0 像 
素 , 其 他 属性 保持 默认 值 不 变 , 如 图 4-16 所 示 。 


页 面 属性 


钴 来 Gx) 国 | 


良 素 @x) 国 | 


4-16 外观 属性 


(2) 链接 。 网 页 中 的 链接 就 是 以 文字 或 图 像 作为 链接 对 象 ,然后 指定 一 个 要 跳 转 到 
的 目标 网 页 地 址 , 当 浏 览 者 单 击 文字 或 其 他 对 象 时 ,浏览 器 就 会 自动 跳 转 到 指定 的 目标 
网 页 。 

在 “分 类 ”列表 中 选择 “链接 ”选项 , 则 右 侧 选项 主要 用 于 设置 网 页 中 超 链接 的 字体 、 
字体 大 小 、 各 种 链接 颜色 链接 下 划 线 的 样式 等 。 


96 Ouixsarid 


本 实例 中 设置 链接 颜色 .已 访问 链接 和 活动 链接 颜色 均 为 共 000000 ,链接 下 划 线 的 
样式 为 “始终 无 下 划 线 ” ,其 他 属性 保持 默认 值 不 变 , 如 图 4-17 所 示 。 


( 同 页 面 字体 》 


和 国 妆 7 ~ 
则 | [#000000 |] 云 执 图 曾 链 接 电 ): 加 | 
活动 链接 册 : 钥 | 


图 4-17 链接 属性 
由 于 其 他 属性 较 少 使 用 ,所 以 在 此 不 再 介绍 。 
4.2.2 设置 表格 属性 


(1) 单 击 如 图 4-18 所 示 的 编辑 窗口 正 上 方 “ 布 局 模式 [退出 ]” 中 的 “退出 ” 超 链接 切 
换 到 “标准 ”视图 。 


index, htal TE 


1 加 吉 ] 国 所 | 国 Wt] i 民生 引 全 .| C 国 . 多 .| b 报关 要 而 


图 4-18 切换 到 标准 模式 


(2) 在 表格 边框 线 上 单 击 选中 * 网 站 头 部 ?表格 ,此 表格 内 包含 网 站 头 部 所 用 的 表格 
和 单元 格 ,打开 “属性 ”面板 ,在 “属性 ”面板 的 对齐 ”下 拉 列 表 中 选择 居中 对 齐 ” 选 项 ,如 
图 4-19 所 示 。 


国 | 二 行 宽 Fczeo ]| 人 来 国 项 充 5 对 齐 [ 居 中 对 卉 国 关口 [无 司 
国 列 E 间距 边框 
ET 背景 着 色 厂 ,| 边框 阁 色 厂 -| 
下 青 景 图 像 虽 ) A 


4-19 表格 属性 面板 


(3) 使 用 相同 的 方法 将 “网 站 主体 ”表格 和 “网 站 底部 ”表格 也 设置 为 居中 对 齐 方式 。 

需要 提醒 的 是 : 设计 者 可 以 根据 网 页 不 同 的 表现 形式 ,在 表格 “属性 ”面板 中 对 表格 
的 相关 属性 进行 设置 。 

当 用 户 无 法 准确 选择 需要 的 表格 或 者 单元 格 时 ,用 户 也 可 以 通过 文档 窗口 底部 的 
“状态 栏 ?进行 操作 ,如 图 4-20 所 示 。 

到 td : 单 击 二 td 二 将 选中 光标 所 在 的 单元 格 ; 
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rT 
4-20 状态 栏 


二 tr 之 : 单 击 二 tr 二 将 选中 光标 所 在 的 行 ; 

< 一 table>: 单 击 一 table 之 将 选中 光标 所 在 的 表格 。 

如 果 多 个 表格 进行 家 套 ,将 会 在 “状态 栏 ” 中 从 左 到 右 出 现成 组 的 二 table 二 二 tr 二 
td ,此 时 左边 的 一 table><<tr 之 二 td 之 表示 外 层 的 表格 ,右边 的 二 table 之 二 tr 二 td 
表示 里 层 的 表格 。 


4.2.3 插入 文本 和 图 像 
网 页 属性 和 表格 属性 设置 完成 之 后 ,就 可 在 表格 中 添加 文本 、 图 像 和 背景 图 像 等 内 


(1) 通过 单 击 鼠 标 将 光标 定位 到 第 一 行 第 一 个 单元 格 中 ,在 “属性 ”面板 中 单 击 “ 背 
景 "文本 框 后 面 的 浏览 按钮 欧 , 在 打开 的 “选择 图 像 源 文件 "对话 框 中 选择 背景 图 像 logo_ 
left. gif( 所 有 的 网 页 素材 都 需要 在 前 期 收集 、 整 理 加 工 ) ,如 图 4-21 所 示 。 


选择 图 像 源 文件 


过 所 文件 各 自 
Bp | 


[ET 


园 1o¢o_center jpg 


ogo_left gif 


E 
| 图像 文 件 (tgif:* jpe:* jpee;* pne;* 国 | 


154 x 130 GIF, 14K/2 


imnages/1ogo_left, gif 
文档 |) index. html 
在 站 点 定义 中 更 改 默 认 的 链接 相对 于 


图 4-21 “选择 图 像 源 文件 "对话 框 


(2) 使 用 同样 的 方法 ,分 别 在 第 一 行 第 二 个 单元 格 和 第 一 行 第 三 个 单元 格 中 插入 背 
景 图 像 logo_center. jpg 和 logo_right. gif, 完 成 Logo 区 的 设置 .如 图 4-22 所 示 。 


2003 北 京 奥运 会 吉 科 和 狗 三 吝 圣 


ESCOTSOFTHEREURCOIYWPICERUESETR 


4-22 Logo 区 效果 


(3) 选择 第 二 行 ,在 “属性 ”面板 中 设置 背景 颜色 为 # 333333、 字 体 为 “宋体 ”、 字 体 大 
小 为 14px、 字 体 颜 色 为 # FFFFFF .单元 格 水 平 对 齐 方式 为 “水 平 对 齐 ”、 垂 直 对 齐 方式 为 
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“居中 "。 

(4) 在 第 二 行 中 依次 输入 导航 名 称 * 网 站 主页 "福娃 简介 "福娃 揭秘 "福娃 动 
态 "“ 福 娃 运动 造型 ~“ 历届 奥运 会 再 祥 物 "福娃 感言 "~“ 奥 运 官网 "各 个 导航 名 称 之 
间 使 用 *| ”分隔 开 ,其 属性 面板 设置 和 效果 如 图 4-23 所 示 。 


炸 式 无 样式 | 无 轩 [CESE Jexz 竺 委 笃 台 人 乌 接 | 辐 9 己 
字体 | 寂 售 太 小 [14 EE [J ] 丘 尘 委 可 上 ~| 

Ee 水 平 | 居中 对 齐 日 不 执行 口 。 背景 急 口 “CagEE 

一 局 失 者 后 5 加 两 王 放 村 归口。 诱因 E5335] 这 杠 记 | 


4-23(a) ”导航 区 属性 面板 设置 


图 4-23(b) 导航 区 效果 


(5) 使 用 同样 的 方法 ,在 表格 第 三 行 中 插入 背景 图 像 daohangbg2. gif ,此 时 完成 网 站 
头 部 信息 编辑 。 

(6) 将 光标 定位 到 福娃 动态 区 的 第 一 行 单元 格 中 ,选择 “插入 ”一 “图 像 ” 命 令 ,将 图 像 
fwdt. gif 插入 到 相应 的 单元 格 中 。 

(7) 将 光标 定位 到 网 站 banner 区 单元 格 中 ,选择 插入” 一“ 图像” 命令 ,将 图 像 
banner. gif 插入 到 相应 的 单元 格 中 。 

(8) 将 光标 定位 到 网 站 公告 栏 区 的 第 一 行 单元 格 中 ,选择 “插入 ”一 “图 像 ”* 命 令 , 将 图 
像 gonggaolan. gif 插入 到 相应 的 单元 格 中 。 

将 光标 定位 到 网 站 公告 栏 区 的 第 二 行 单元 格 中 ,在 “属性 ”面板 中 其 设置 背景 颜色 为 
共 FOFOF0 ,如 图 4-24 所 示 。 

(9) 使 用 相同 的 方法 在 福娃 简介 区 的 第 一 行 和 第 二 行 分 别 插入 图 像 fwjj. gif 和 图 像 
fwjjtp. jpg, 完 成 福娃 简介 区 的 布局 。 
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图 4-24 主页 部 分 效果 
(10) 使 用 相同 的 方法 ,分 别 完成 福娃 揭秘 、 精 彩 图 片 、 名 人 说 福娃 和 投票 调查 区 的 编 
辑 , 如 图 4-25 所 示 。 


图 4-25 主页 部 分 效果 


其 中 精彩 图 片区 的 第 一 行 插入 jctpbg. gif 图 像 文件 ,名 人 说 福娃 区 的 第 一 行 插入 
mrsfwbg. gif 图 像 文件 ,福娃 揭秘 区 第 一 行 插 入 fwjm. gif 图 像 文件 ,投票 调查 区 第 一 行 
插入 tpdc. gf 图 像 文件 。 另 外 ,福娃 揭秘 区 和 投票 调查 区 的 第 二 行 需要 在 “属性 ”面板 中 
设置 背景 颜色 为 # FOFOF0。 

(11) 将 光标 定位 到 网 页 底部 的 版 权 区 中 ,设置 背景 图 像 为 banquan. gif, 并 且 输 入 网 
站 相关 的 版 权 信 息 ,调节 其 显示 位 置 和 字体 大 小 、 颜 色 等 .如 图 4-26 所 示 。 

(12) 至 此 ,主页 的 基本 框架 已 设计 完成 , 接 下 来 在 福娃 动态 、 公 告 栏 、 福 娃 揭 秘 、 投 票 
调查 、 精 彩 图 片 和 名 人 说 福娃 区 添加 相应 文字 .并 且 进 行 必 要 的 编辑 即 可 ,其 效果 如 图 4-27 
所 示 。 


Maissarid 


A 


Memo 


介 浊 锡 锡 和 区 = 


四 La mnm 


4-27 ”添加 文字 信息 


4.2.4 插入 Flash 动画 


只 有 文本 和 图 像 的 网 页 还 是 很 单调 ,因为 它 缺 乏 动感 。 在 网 页 中 加 入 Flash 动画 、 音 
乐 等 元 素 , 可 使 网 页 更 具 动感 ,让 网 页 更 加 精彩 。 
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本 实例 根据 “北京 奥运 吉祥 物 福娃 ”网 站 的 设计 要 求 , 需 要 在 主页 Logo 区 插入 
一 个 透明 Flash 动画 ,其 具体 步骤 如 下 : 

(1) 将 光标 定位 到 主页 Logo 区 的 第 二 个 单元 格 中 ,在 “属性 ”面板 中 设置 水 平 对 齐 方 
式 为 “ 右 对 齐 ”, 选 择 “ 插 入 ”一 “媒体 ”一 Flash 命令 ,在 弹出 的 “选择 文件 ”对 话 框 中 ,选择 
fuwa. swf 文件 ,如 图 4-28 所 示 , 单 击 “ 确 定 ” 按 钮 插入 Flash 动画 。 


notes 本 icepte aif 
banner gif 
banguan gif 


aaohengbhee gif 
ow sw 


rdt if 
vjj. cif tpac gif 
jjtp jpe 


ntitled htal 


4-28 “选择 文件 ”对话 框 


(2) 选中 插入 的 fuwa. swf 动画 ,在 如 图 4-29 所 示 的 “属性 ”面板 中 设置 Flash 动画 
的 宽 为 250 像素 ,高 为 130 像素 。 


mages/ Fume svf 


RNX 节 部 未 ) 国 


图 4-29 Flash 属性 面板 


(3) 单 击 “ 参 数 ” 按 钮 ,在 弹出 的 “参数 ”对 话 框 中 .输入 参数 名 为 “wmode”, 参 数值 为 
“transparent”( 即 让 插入 的 Flash 动画 透明 ) .如 图 4-30 所 示 , 单 击 “ 确 定 ” 按 钮 返回 。 


4-30 “参数 ”对话 框 


(4) 根据 预览 效果 可 进一步 调整 透明 Flash 动画 的 大 小 及 位 置 ,完成 插入 透明 Flash 
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动画 的 操作 ,其 效果 如 图 4-31 所 示 。 


p008 北 训 奥 运 会 吉祥 物 二 春 娃 


4-31 透明 Flash 动画 效果 


4.2.5 插入 JavaScript 网 页 特效 代码 


JavaScript 是 目前 网 页 设计 中 最 容易 学 又 最 方便 的 网 页 描述 语言 ,用 户 可 以 利用 
JavaScript 设计 出 各 种 生动 活泼 的 网 页 特效 。 目 前 ,Internet 中 JavaScript 网 页 特效 代码 
非常 丰富 ,用 户 可 以 直接 下 载 一 些 网 页 特效 代码 ,添加 在 网 页 中 。 

本 实例 根据 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 设计 要 求 . 需 要 在 图 片 新 闻 区 添加 图 
片 幻 灯 片 效果 ,其 具体 步骤 如 下 : 

(1) 在 Internet 中 搜索 下 载 “ 新 闻 图 片 幻 灯 片 特效 代码 ”相关 文件 ,然后 打开 “新 闻 图 
片 幻 灯 片 特效 ”文件 夹 ,如 图 4-32 所 示 , 可 以 看 到 有 一 个 xwhdp. html 文件 一 个 js 文件 
夹 和 一 个 images 文件 夹 。 


名 新 闻 图 片 幻灯 片 特效 
文件 四 轴 租 四 查看 W) 收 戈 ) 工具 中 帮助 00 


On . © -让 | Pr xn | 回 - 


图 4-32 新 闻 图 片 幻灯 片 特效 文件 夹 


(2) 将 js 文件 夹 移动 到 站 点 根 目录 下 (FuWa\) .将 images 中 的 所 用 文件 移动 到 根 目 
录 下 的 images 文件 夹 下 ,使 用 Dreamweaver 打开 xwhdp. html 文件 ,选择 代码 视图 ,可 
以 看 到 其 代码 如 下 所 示 : 


<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JS 图片 轮换 广告 代码 < /title> 

<style type= "text/css"> 

body{text-align:center;} 

td {font-size: 12px;} 
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第 @》s i 京 向 运 证 祥 稳 


#textslide{color:#ffffff;} 
</style> 
</head> 
<body> 
<table width=340 border=0 cellpadding=0 cellspacing=0 bordercolor="#4AA8E5"> 
<tr valign=top> 
<td colspan=3><a onClick="gotoshow()" onMouseOver="tu ove()" onMouseOut= 
"ou()" style="cursor:hand">< img src="images/ad- 01.jpg" width=340 height= 
258 name="slide" border=0></a></td> 
</tr> 
<tr> 
<td width= 320 height: 
id= textslide> 焦 点 图 标题 层 < /div>< /td> 
<td width=1 bgcolor=#389de3><div style="position:relative"> 


"19" align=center bgcolor=#389de3 class="white"><div 


<div style="position:absolute;top:10px"> 
<table width=95 border=0 cellpadding=0 cellspacing=0> 
<tr valign=top align=center> 
<td width="19" height: 


"><div style= "position:relative"> 

<div id=xiaotul style="position:absolute;top:- 19px;left:0px"> 
<img src=images/bian]l .gif id=xiaosan]l width=10 height=3 border=0> 
</div> 

</div> 


</td> 


<td width="19" height="0"><div style="position:relative"> 

<div id=xiaotu2 style="position:absolute;top:-19px;left:0px"> 
<img src=images/bianl .gif id=xiaosan2 width=10 height=3 border=0> 
</div> 

</div> 


</td> 


<td width="19" height="0"><div style="position:relative"> 
<div id=xiaotu3 style="position:absolute;top:- 19px;left:0px"> 
<img src=images/bianl .gif id=xiaosan3 width=10 height=3 border=0> 
</div> 

</div></td> 


<td width="19" height: 


><div style="position:relative"> 
<div id=xiaotu4 style="position:absolute;top:-19px;left:0px"> 
<img src=images/bianl .gif id=xiaosan4 width=10 height=3 border=0> 
</div> 
</div></td> 
<td width="19" height=" 


"><div style="position: relative; left: 
px ”> 
<div id=xiaotu5 style="position:absolute;top:- 19px;left:0px"> 


<img src=images/bian1.gif id=xiaosan5 width=10 height=3 border=0> 
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</div> 
</div></td> 
</tr> 
</table> 
</div> 
</div></td> 
<td width=95 height="19"><table width= 95 border=0 cellpadding=0 
cellspacing=0> 
<tr valign=top> 
<td width="19" height="19" clas 


onMouseOver="ove (0)" onMouseOut= 
="19" height 
<td width: 


"ou()">< img src 
9" border=0></a></td> 

9" height="19" clas 
onMouseOver="ove (1)" onMouseOut= 
="19" height="19" border=0></a></td> 
<td width="19" height="19" class 


"ou()"><img src 


onMouseOver="ove (2)" onMouseOut= 
="19" height="19" border=0></a></td> 
<td width="19" height="19" class 


onMouseOver="ove (3)" onMouseOut="ou()"><img src="images/4.gif" width 


="19" height="19" border=0></a></td> 


<td width="19" height="19"><a style="cursor:hand" onMouseOver="ove 


images/5.gif" width="19" height="19" 


(4) "onMouseOut= "ou()">< img src= 
border=0></a></td> 
</tr> 
</table></td> 
</tr> 

</table> 

<script language=JavaScript src="js/5adpics.js"></script> 

</body> 


(3) 打开 FuWa 根 目 录 下 的 index. html 文件 ,将 光标 定位 在 图 片 新 闻 区 单元 格 中 ， 
选择 “代码 视图 ”, 将 xwhdp. html 中 的 二 body 二 … 坪 /body 二 之 间 的 内 容 复制 到 光标 所 
在 的 位 置 ;将 xwhdp. html 中 的 二 style 之 …< 一 /style 二 之 间 的 内 容 复 制 到 index. html 文 


件 中 的 一 style 之 … 一 /style 二 之 间 。 


(4) 打开 images 文件 夹 ,将 文件 夹 中 的 ad-01. jpg、ad-02. jpg .ad-03. jpg .ad-04. jpg、 


ad-05.jpg 图 片 替换 为 自己 的 图 片 。 


(5) 使 用 Dreamweaver 打开 js 文件 夹 下 的 5adpics. js, 选 择 代 码 视图 .可 以 看 到 如 下 


代码 : 
//slideimages 数组 为 变换 的 图 


var slideimages=new Rrray() 


slideimages [0]="images/ad- 01.jpg"; // 滚 动 图 片 名 称 


"homejdboder"><a style="cursor:hand" 


"images/1.gif" width 


"homejdboder"><a style="cursor:hand" 


"images/2.gif" width 


"homejdboder"><a style="cursor:hand" 


"ou ()"><img src="images/3.gif" width 


"homejdboder"><a style="cursor:hand" 
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slideimages[1]="images/ad- 02.jpg"; 

slideimages [2]="images/ad- 03.jpg"; 

slideimages[3]="images/ad- 04.jpg"; 

slideimages[4]="images/ad- 05.jpg"; 

//slidetext 数组 为 变换 的 文字 

Var slidetext=new Array (); 
slidetext[0]=" 奥 运 吉祥 物 揭晓 :五 个 福娃 "北京 欢迎 您 !""; // 滚 动 图 片 对 应 的 标题 
slidetext[1]=" 福 娃 大 家 庭 "; 

slidetext[2]=" 五 环 旗下 的 福娃 "; 

slidetext[3]=" 檀 莘 学 子 喜 迎 "福娃 ""; 

slidetext[4]=" 奥 运 千 天 倒计时 "; 

//slidetext 数组 为 点 击 大 图 后 跳 到 的 地 址 

var slidelinks=new Rrray() 

slidelinks [0 
slidelinks [1 
slidelinks [2 
slidelinks [3 
slidelinks[4]="#"; 
// 焦 点 图 初始 内 容 一 一 start 

var slidespeed=2000 // 滚 动 图 片 滚动 间隔 时 间 


var slidesanjiaoimages=new Array ("images/bian2.gif","images/bianl.gif"); 


// 滚 动 图 片 对 应 的 链接 地 址 


Var Slidesanjiaoimagesname = new Array ( " Xiaosanl"," xiaosan2" 


"xiaosan3 "， 
"xiaosan4", "xiaosan5"); 
Var filterArray=new Array(); 
filterArray[0] ="progid: DXImageTransform. Microsoft. Pixelate (enabled= false, 
duration=2,maxSquare=25 )"; 
filterArray [1] =" progid: DxXImageTransform. Microsoft. Stretch (duration= 1, 
stretchStyle=PUSH) "7 
filterArray[2]="progid:DXxImageTransform.Microsoft.Stretch (duration=1)"; 
filterArray[3]="progid:DXImageTransform.Microsoft.Slide(bands=8, duration=1)"; 
filterArray[4]="progid:DXImageTransform .Microsoft.Fade ( duration=1,overlap=0.25 ) "7 
var imageholder=new Array() 
var ie55=window.createPopup 
for (i=0;i<slideimages.length;i++){ 
imageholder [i]=new Image () 
imageholder [i] .src=slideimages[i] 
} 
function tu ove() {clearTimeout (setID)} 
function ou() {slideit ()} 

var whichlink=0 

var whichimage=0 

function gotoshow(){ 


window.open (slidelinks [whichlink]); 
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} 
function slideit (){ 
document.images.slide.style.filter=filterArray [whichimage]; 
//alert (document .images.slide.style.filter); 
pixeldelay= (ie55)? (document .images.slide.filters [0].duration 
*1000) : 0 
//alert (pixeldelay); 
if (!document .images) return 
if (ie55) { 
document .images.slide.filters[0] .apply (); 
document .images.slide.filters[0] .play(); 
} 
document .images.slide.src=imageholder [whichimage] .src 
document .getElementById ("textslide") .innerText=slidetext [whichimage]; 
document .getElementById ("xiaosanl") .src=slidesanjiaoimages [0]; 
document .getElementById ("xiaosan2") .src=slidesanjiaoimages [0]; 
document .getElementById ("xiaosan3") .src=slidesanjiaoimages [0]; 
document .getElementById ("xiaosan4") .src=slidesanjiaoimages [0]; 


document .getElementById ("xiaosan5") .src=slidesanjiaoimages [0]; 


document. getElementById (slidesanjiaoimagesname [whichimage ]). src = 


slidesanjiaoimages [1]; 


document. 
document . 
document . 
document. 
document. 


document . 


if (ie55) document .images.slide.filters[0].Play() 
whichlink=whichimage 
whichimage= (whichimage<slideimages.length-1)?whichimage+1 : 0 
setID=setTimeout ("slideit()",slidespeed+pixeldelay) 
slideit() 
function ove(n){ 

clearTimeout (setID) 

whichimage=n; 


document .images.slide.src=imageholder [whichimage] .src 


getElementById("textslide") .innerText=slidetext [whichimage]; 
getElementById("xiaosanl1") .src=slidesanjiaoimages [0]; 
getElementById("xiaosan2") .src=slidesanjiaoimages [0]; 
getElementById("xiaosan3") .src=slidesanjiaoimages [0]; 
getElementById("xiaosan4") .src=slidesanjiaoimages [0]; 


getElementById("xiaosan5") .src=slidesanjiaoimages [0]; 


document .getElementById (slidesanjiaoimagesname [whichimage]) .src= 


slidesanjiaoimages [1];} 


(6) 可 以 根据 代码 说 明文 档 更 改 相应 的 代码 ,完成 新 闻 图 片 幻灯 片 特效 的 设置 。 
插入 JavaScript 网 页 特效 代码 之 后 ,就 基本 上 完成 了 “北京 奥运 吉祥 物 一 一 福娃 ”网 
站 主页 的 设计 ,其 最 终 效果 如 图 433 所 示 。 
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4-33 主页 效果 图 


4.3 币 入 其 他 和 美 网 页 


设计 完成 网 站 主页 之 后 ,设计 者 还 需要 继续 设计 网 站 的 其 他 页 面 。 由 于 网 站 的 整体 
风格 一 致 ,因此 其 他 页 面 的 设计 只 需要 对 主页 进行 修改 即 可 。 

“北京 奥运 吉祥 物 一 一 福娃 ”网 站 除了 主页 之 外 主要 包括 内 容 显 示 页 面 、 标 题 列表 页 
面 、 图 片 显 示 页 面 和 留言 板 页 面 。 


4.3.1 内 容 显示 页 面 


内 容 显示 页 面 主要 用 来 显示 主页 中 一 些 标题 或 图 片 ( 超 链接 ) 所 对 应 的 具体 内 容 。 
包括 福娃 简介 、 福 娃 揭秘 等 对 应 的 链接 页 面 。 下 面 以 福娃 “Fe 
简介 页 面 为 例 描 述 具体 设计 过 程 。 ET 国 |#ht 刘 田 。 图 

01) 在 “文件 ”面板 中 ,选中 网 站 主页 ndex html 文 区 ee 
档 , 单 击 鼠 标 右 键 ,选择 快捷 菜单 中 的 “编辑 ”一 “复制 " 命 
令 , 在 网 站 根 目 录 下 复制 了 一 个 “拷贝 于 index. html” 文 
档 , 将 其 更 名 为 fwjj. html, 如 图 4-34 所 示 。 

(2) 打开 福娃 简介 fwjj. html 文档 ,对 页 面 主体 部 分 内 
容 进 行 修改 ,方法 与 制作 网 站 主页 基本 相同 ,最 终 效果 如 
图 4-35 所 示 。 图 4-34 复制 index. html 
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4-35 内 容 显 示 页 面 效 果 图 


4.3.2 ”标题 列表 页 面 


标题 列表 页 面 主 要 用 来 显示 网 站 的 新 闻 文章 等 所 对 应 的 所 有 标题 列表 。 因 为 主页 
的 页 面 布局 大 小 有 限 ,不 能 全 部 显示 网 站 中 所 有 新 闻 或 文章 的 标题 ,因此 标题 列表 页 面 
就 是 用 来 显示 全 部 标题 的 。 一 般 的 设计 方法 是 单 击 主页 中 对 应 的 “更 多 ”或 More 链接 时 
打开 对 应 的 标题 列表 页 面 。 

本 实例 中 主要 是 福娃 动态 、 精 彩 图 片 和 名 人 说 福娃 等 页 面 ,用 类 似 的 方法 设计 标题 
列表 页 面 ,其 效果 如 图 4-36 所 示 。 


4.3.3 图 片 显示 页 面 


图 片 显 示 页 面 主要 用 来 单独 或 以 缩 略 图 的 形式 显示 网 站 中 的 各 种 图 片 。 
本 实例 中 主要 包括 福娃 运动 造型 .历届 奥运 会 吉祥 物 等 页 面 。 用 类 似 的 方法 设计 图 
片 显示 页 面 ,其 效果 如 图 4-37 所 示 。 


4.3.4 留言 板 页 面 


留言 板 页 面 主要 用 来 实现 对 网 站 的 留言 功能 ,以 达到 和 浏览 者 交互 的 作用 。 
本 实例 中 就 是 福娃 感言 所 对 应 的 页 面 。 用 类 似 的 方法 设计 留言 板 页 面 ,其 效果 如 
图 4-38 所 示 。 
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4-38 ”留言 板 页 面 效 果 图 


4.4 创建 起 链接 


超 链 接 在 网 站 中 占据 了 举足轻重 的 位 置 .是 网 络 的 灵魂 。 通 过 超 链 接 可 以 从 一 个 站 
点 跳 转 到 另 一 个 站 点 ,可 以 从 一 个 网 页 跳 转 到 另 一 个 网 页 ,此 外 ,还 可 以 链接 到 一 个 供 下 
载 的 文件 ,或 链接 到 一 个 电子 邮件 。 


4.4.1 超 链接 相关 知识 


1. 超 链 接 的 分 类 

根据 超 链接 目标 端点 的 不 同 , 可 以 将 超 链 接 分 为 内 部 超 链接 、 外 部 超 链 接 、 锚 点 超 链 
接 、 邮 件 超 链接 和 下 载 超 链接 。 

(1) 内 部 超 链接 : 指 同一 个 站 点 内 部 网 页 文档 之 间 的 超 链 接 。 

(2) 外 部 超 链 接 : 指 站 点 与 站 点 之 间 网 页 文档 之 间 的 超 链 接 。 

(3) 锚 点 超 链 接 : 指 在 同一 个 页 面 或 不 同 页 面 指 定位 置 的 超 链 接 , 这 种 超 链接 需要 

(4) 邮件 超 链 接 : 指 单 击 链接 后 启动 E-mail 邮件 客户 端 程序 ,允许 用 户 发 送 邮 件 到 
指定 的 电子 邮箱 。 

(5) 下 载 超 链接 : 指 链接 的 目标 端点 不 是 浏览 器 能 够 识别 的 文档 ,而 是 如 EXE 文 
件 .ZIP 文件 .RAR 文件 等 ,这 种 超 链接 主要 用 于 向 用 户 提供 下 载 服务 。 


2. 超 链接 的 路 径 
在 网 站 中 每 一 个 网 页 文件 都 有 一 个 独立 的 地 址 ,也 就 是 通常 所 说 的 URL( 统 一 资源 
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定位 符 ) ,因此 在 链接 目标 网 页 之 前 ,首先 要 清楚 目标 网 页 文件 的 链接 路 径 , 概 括 起 来 , 文 
档 的 链接 路 径 主要 有 绝对 路 径 、 相 对 路 径 和 根 目录 相对 路 径 三 种 形式 。 

1) 绝对 路 径 

绝对 路 径 提供 所 链接 网 页 文件 的 完整 路 径 , 包 含 其 应 用 协议 (如 http://)。 绝 对 路 
径 不 管 目 标 文件 在 什么 位 置 都 可 以 非常 精确 地 找到 ,除非 目标 文件 的 位 置 发 生变 更 , 否 
则 链接 就 不 会 失效 。 其 主要 用 于 创建 站 外 具有 固定 地 址 的 超 链接 ,例如 : 要 建立 到 北京 
奥运 会 官网 的 超 链 接 就 可 以 使 用 http://www. beijing2008. cn/。 

2) 相对 路 径 

相对 路 径 是 指 由 源 文件 所 在 的 路 径 引 起 的 跟 其 他 文件 (或 文件 夹 ) 的 路 径 关系 。 这 
种 方式 主要 以 当前 文档 所 在 位 置 为 起 点 到 被 链接 文档 经 由 的 路 径 ,省 略 对 于 当前 文档 和 
所 链接 的 文档 都 相同 的 绝对 路 径 部 分 ,而 只 提供 不 同 的 路 径 部 分 ,这 是 网 页 制作 过 程 中 
比较 常用 的 一 种 方式 ,适合 网 站 的 内 部 链接 ,具有 可 移植 性 ,是 网 页 制作 的 首选 。 

如 果 链 接 到 同一 目录 下 , 则 只 需 输 入 要 链接 文件 的 名 称 ; 如 果 要 链接 到 下 级 目录 中 
的 文件 ,只 需 先 输入 目录 名 ,然后 加 "/", 再 输入 文件 名 ;如 果 要 链接 到 上 一 级 目录 中 文 
件 , 则 先 输入 ". ./" ,再 输入 文件 名 ,其 具体 使 用 方法 示例 如 表 4-1 所 示 。 

表 4-1 相对 路 径 示例 
相对 路 径 

her{= "fuwa. html” 

her{="web/f{fuwa. html” 

her{=".. /fuwa. html” 

her{f="../.. /fuwa. html" 


含义 
fuwa. html 是 本 地 当前 路 径 下 的 文件 
fuwa. html 是 本 地 当前 路 径 下 "web" 子 目录 下 的 文件 
fuwa. html 是 本 地 当前 目录 的 上 一 级 子 目 录 下 的 文件 
fuwa. html 是 本 地 当前 目录 的 上 两 级 子 目录 下 的 文件 


3) 根 目 录 相 对 路 径 

根 目 录 相对 路 径 也 适用 于 创建 网 站 的 内 容 链 接 , 但 不 太 常 用 , 根 路 径 以 “/” 开 始 , 代 
表 根 目录 ,然后 书写 目录 名 ,最 后 书写 文件 名 。 例 如 :“/image/button. gif" 是 指 链接 到 网 
络 服务 器 根 上 日 录 下 的 image 文件 夹 中 的 button. gif 文件 。 


4.4.2 超 链 接 的 创建 


接 下 来 ,以 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 为 实例 ,介绍 各 种 超 链接 的 创建 和 使 用 
方法 。 


1. 内 部 超 链接 的 创建 


打开 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 主页 index. html 文件 ,在 导航 栏 中 选中 “ 福 
娃 简介 ”四 个 字 作 为 超 链接 载体 。 在 “属性 ”面板 的 “链接 "文本 框 中 输入 目标 页 面 文件 的 
URL, 或 者 单 击 旁 边 的 “浏览 文件 ”按钮 国 , 弹 出 “选择 文件 ”对 话 框 ,选择 对 应 的 页 面 文 
件 (fwjj. html) 作 为 超 链接 的 目标 文件 ,如 图 4-39 所 示 。 


2. 热点 超 链 接 的 创建 
创建 超 链接 时 ,链接 载体 可 以 是 文字 、 图 像 表 单 以 及 图 像 热 点 。 图 像 和 表单 的 创建 方 
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查找 范围 中 :| 局 Furs 加 昌 作 局- 


fydrx. html 


图 mestbook htnl 


4-39 选择 超 链接 目标 文件 


式 与 文字 链接 相同 ,但 是 对 图 像 热 点 创建 超 链接 时 ,需要 使 用 热点 工具 ,具体 操作 步骤 如 下 : 
(1) 选择 福娃 简介 (fwjj. gif) 图 像 ,在 “属性 ?面板 中 选择 相应 的 "热点 工具 ”, 从 左 到 
右 依 次 是 矩形 热点 工具 、 圆 形 热点 工具 和 多 边 形 热点 工具 ,如 图 4-40 所 示 。 


图 像 ，3K 宽 Be0 源 文 件 |images/fwjj.gi @D 

高 Bl 链接 DD 

地 图 垂直 边 距 目标 Ea 
ie 低 解析 度 源 中 ) 9D 


图 4-40 图 像 热 点 工具 


(2) 使 用 “矩形 热点 工具 "在 福娃 简介 图 像 中 的 贝 贝 区 域 用 鼠标 拖 动 面 : 


如 图 4-41 所 示 , 之 后 在 “属性 ”面板 中 使 用 相同 的 方法 创建 超 链 接 , 使 其 链接 


页 文件 。 


[福娃 简介 ] 


和 Ww ae | 
福娃 贝 贝 恒 娃 昌 昌 己 持 政 歼 寺村 迎 迎 三 持 妮 妮 
4-41 划分 热点 区 域 


3. 外 部 超 链接 的 创建 


1 一 个 热点 ， 


到 对 应 的 网 


本 实例 需要 将 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 与 北京 奥运 会 官方 网 站 链接 起 来 ,其 
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具体 操作 步骤 如 下 : 
(1) 在 导航 栏 中 选中 “奥运 官网 ”四 个 字 , 然 后 在 “属性 ”面板 中 的 “链接 "文本 框 中 输 
和 北京 奥运 会 官方 网 站 的 网 址 http://www. beijing2008. cn/ ,如 图 4-42 所 示 。 


链接 http: /wm beijinez008 cn/ 回忆 =] 
目标 阁 


4-42 外 部 超 链 接 


(2) 根据 实际 需要 ,可 以 在 “属性 ”面板 中 的 “目标 ”选项 中 设置 链接 页 面 在 浏览 器 中 
的 打开 方式 ,共有 四 个 选项 。 

_blank: 在 一 个 新 浏览 器 窗口 中 载 人 所 链接 的 网 页 。 

_parent: 在 该 链接 所 在 框架 的 父 框架 或 父 窗口 中 载 人 所 链接 的 网 页 。 

_self: 在 该 链接 所 在 的 同一 个 框架 或 窗口 中 载 入 所 链接 的 网 页 。 

_top: 在 整个 浏览 器 窗口 中 载 人 所 链接 的 网 页 。 

(3) 保存 全 部 网 页 ,然后 按 F12 键 预览 网 页 , 当 单 击 " 奥 运 官网 ”时 ,网 页 就 会 跳 至 北 
京 奥运 会 官方 网 站 的 主页 上 。 


4. 锚 点 超 链接 的 创建 


当 一 个 网 页 的 主题 或 文字 较 多 而 无 法 一 屏 显 示 时 ,可 以 在 网 页 内 建立 多 个 标记 点 ， 
将 超 链接 指定 到 这 些 标记 点 上 ,从 而 实现 页 内 链接 和 快速 定位 显示 ,最 终 使 浏览 者 快速 
找到 要 阅读 的 内 容 , 这 就 是 锚 点 超 链接 技术 。 

本 实例 以 “福娃 揭秘 一 一 设计 思想 ”页面 为 例 , 本 页 对 每 个 福娃 的 设计 思想 进行 了 详 
细 的 介绍 ,由 于 内 容 较 多 ,普通 显示 方式 需要 多 屏 才 能 显示 完毕 。 创 建 锚 点 超 链接 后 当 
用 户 单 击 每 个 福娃 图 片 下 方 的 文字 时 ,页 面 就 自动 跳 转 到 相对 应 的 福娃 介绍 内 容 , 具 体 
操作 步 又 如 下 : 

(1) 将 光标 定位 到 “福娃 贝 贝 设 计 思想 " 文 
字 的 右 侧 ,选择 “插入 ”一 “命名 锚 记 ”命令 ,在 
打开 的 “命名 锚 记 ”对话 框 的 “ 锚 记 名 称 ” 后 面 
的 文本 框 中 输入 “fwbb”, 如 图 4-43 所 示 。 图 4-43 “命名 锚 记 ”对话 框 

(2) 将 页 面向 上 滚动 到 “福娃 贝 贝 ”图片 
处 ,选中 图 片 下 方 的 “福娃 贝 贝 ”四 个 字 ,在 “属性 ?面板 中 的 链接 文本 框 中 输入 "# ”号 和 
锚 点 名 称 "fwbb”。 这 样 就 实现 了 页 面 内 的 链接 ,预览 网 页 后 单 击 “ 福 娃 贝 贝 " 链 接 文字 ， 
页 面 将 直接 定位 在 福娃 贝 贝 设计 思想 介绍 内 容 的 位 置 上 。 

(3) 使 用 相同 的 方法 创建 福娃 晶 晶 、 福 娃 欢 欢 ,福娃 迎 迎 .福娃 妮 妮 的 锚 点 链接 , 如 
图 4-44 所 示 。 


5. 电子 邮件 超 链 接 的 创建 


在 主页 底部 版 权 区 有 一 项 “联系 我 们 ”. 要 实现 单 击 此 处 可 以 给 指定 电子 邮箱 发 送 电 
子 邮 件 的 功能 ,就 要 用 到 E-mail 链接 技术 ,具体 操作 步骤 如 下 : 
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图 4-44 网 页 锚 点 链接 


(1) 选中 “联系 我 们 ”四 个 文字 。 
(2) 选择 “插入 ”一 “电子 邮件 链接 ” 


令 , 弹 出 如 图 4-45 所 示 “ 电 子 邮 件 链接 ”对 话 


框 ,在 E-mail 文本 框 中 输入 目标 电子 邮件 地 址 即 可 。 


电子 邮件 链接 


: | 联系 我 们 | 


qucec2168sohu_ com 


图 4-45 电子 邮件 链接 


(3) 单 击 “ 确 定 ” 按 钮 , 则 在 页 面 中 创建 了 E-mail 的 超 链 接 。 
需要 提醒 的 是 : 此 操作 也 可 以 通过 选中 “联系 我 们 ”四 个 文字 ,然后 直接 在 属性 面板 
的 链接 文本 框 中 输入 “mailto: 目 标 电子 邮件 地 址 ”来 实现 。 
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6. 文件 下 载 超 链接 的 创建 


文件 下 载 超 链 接 的 创建 与 网 页 超 链接 的 创建 类 似 , 只 不 过 目标 文件 不 是 网 页 文件 ， 
而 是 诸如 x. ZIP、x .RAR、x .DOC、 x .EXE 等 格式 的 文件 而 已 。 当 然 , 当 单 击 文件 下 
载 超 链接 时 也 不 是 直接 打开 文件 .而 是 先 下 载 才能 打开 这 个 文件 。 

另外 ,文件 下 载 超 链接 也 有 相对 路 径 和 绝对 路 径 之 分 。 


4.5 本 章 小 结 


本 章 以 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 静态 设计 贯穿 整 章 内 容 , 以 实际 设计 开发 
的 顺序 先后 介绍 了 页 面 的 布局 、 主 页 的 设计 ;网 页 属性 和 表格 属性 的 设置 ;如 何 插入 文本 
和 图 像 .插入 Flash 动画 、 择 入 JavaScript 网 页 特效 代码 ;内 容 显示 页 面 \ 标 题 列 表 页 面 、 
图 片 显示 页 面 、 留 言 板 页 面 的 设计 以 及 各 种 超 链 接 的 创建 方法 。 

在 实例 的 讲解 过 程 中 ,以 实用 的 角度 对 Adobe Dreamweaver CS3 中 的 常用 知识 点 也 
进行 了 介绍 和 总 结 。 


4.6 习 题 


实 训 题 


参照 "北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 静态 设计 ,承接 1. 6 习题 中 的 简 答 及 实 训 题 
第 5 小 题 编写 的 网 站 策划 书 ,设计 网 站 的 主要 静态 页 面 。 
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使 用 CSS 美化 “ 北 蒜 奥 运 吉祥 物 
福娃 "网 站 


对 网 页 设计 者 来 说 ,HTML 语言 一 定 不 会 陌生 ,因为 它 是 所 有 网 页 制作 的 基础 。 但 
是 如 果 和 希望 网 页 能 够 美观 .大方 ,并 且 升 级 方便 ,维护 轻松 ,那么 仅 有 HTML 是 不 够 的 ， 
还 需要 CSS 来 分 担 这 一 重要 角色 。 

本 章 从 CSS 的 基本 概念 出 发 ,介绍 CSS 的 特点 、 基 本 语法 ,以 及 如 何在 网 页 中 引用 
CSS ,并 对 CSS 进行 全 面 的 演示 。 最 后 以 “北京 奥运 吉祥 物 一 一 福娃 ”为 例 , 讲 述 如 何 使 
用 CSS 布局 网 页 、 控 制 网 页 风格 和 美化 网 站 。 


5.1 屡 坡 样式 过 ( CSS ) 基础 


熟练 掌握 了 Dreamweaver 的 基本 功能 后 ,可 能 会 发 现 制作 的 网 页 存在 诸多 的 不 足 之 
处 ,如 文字 不 能 添加 在 图 片上 ,段落 之 间 不 能 设置 行距 等 。 有 时 熟练 掌握 了 HTML 标记 
也 不 能 随意 改变 网 页 元 素 的 外 观 , 无 法 随心 所 欲 地 编排 网 页 。 因 此 , W3C( World Wide 
Web Consortium) 协 会 颁布 了 一 套 CSS 语法 ,用 来 扩展 HTML 的 功能 ,现在 已 经 为 大 多 
数 浏览 器 所 支持 ,成 为 网 页 设计 必 不 可 少 的 工具 之 一 。 


5.1.1 层 芭 样式 表 (CSS) 简 介 


层 释 样式 表 (Cascading Style Sheet,CSS) 是 用 于 控制 网 页 样式 并 允许 将 样式 信息 与 
网 页 内 容 分 离 的 一 种 标记 性 语言 。CSS 是 1996 年 由 W3C 审核 通过 并 且 推 荐 使 用 的 。 
简单 地 说 ,CSS 的 引入 就 是 为 了 使 得 HTML 能 够 更 好 地 适应 页 面 的 美工 设计 。 它 以 
HTML 为 基础 ,提供 了 丰富 的 格式 化 功能 ,如 字体 、 颜 色 、 背 景 、 整 体 排版 等 ,并 且 网 页 设 
计 者 可 以 针对 各 种 浏览 器 设置 不 同 的 样式 风格 ,包括 显示 器 、 打 印 机 、 打 字 机 、 投 影 仪 、 
PD 等 。 


5.1.2 CSS 的 特点 
在 网 页 制作 时 采用 CSS 技术 ,可 以 有 效 地 对 网 页 的 布局 字体、 颜色 .背景 和 其 他 效 
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果实 现 更 加 精确 的 控制 ,设计 者 只 要 对 相应 的 代码 做 一 些 简 单 的 修改 ,就 可 以 改变 网 页 
的 外 观 和 格式 。 采 用 CSS 技术 设计 网 页 具有 如 下 特点 : 

(1) CSS 能 够 缩减 网 页 代码 ,提高 页 面 载 人 速度 。 

(2) CSS 使 网 页 结构 更 加 清晰 ,容易 被 搜索 引擎 搜索 到 。 

(3) CSS 支持 各 种 浏览 器 ,兼容 性 好 。 

(4) CSS 使 设计 者 在 修改 设计 时 更 加 高 效 , 设 计 者 只 要 简单 地 修改 几 个 CSS 文件 就 
可 以 重新 格式 化 一 个 有 成 千 上 万 个 页 面 的 站 点 。 

(5) CSS 使 网 页 的 表现 和 内 容 相 分 离 ,干净 利落 。 将 设计 部 分 剥离 出 来 放 在 一 个 独 
立 样 式 文件 中 ,而 网 页 主要 用 来 放置 内 容 , 可 以 降低 网 页 无 效 的 可 能 。 

(6) CSS 使 页 面 的 字体 变 得 更 漂亮 ,更 容易 编排 ,使 页 面 真正 赏心悦目 。 

(7) CSS 能 够 精确 地 控制 页 面 的 布局 。 


5.2 网 页 中 使 用 CSS 的 方法 


在 网 页 中 使 用 CSS 有 4 种 方法 ,即行 内 样式 表 、 内 联 样式 表 、 外 联 样式 表 和 导入 样 


5.2.1 行内 样式 表 


行内 样式 表 也 称 内 嵌 样 式 表 ,是 将 CSS 代码 混合 在 HTML 标记 里 使 用 的 一 种 方法 ， 
它 就 是 使 用 style 属性 将 CSS 代码 嵌 套 在 HTML 的 标记 中 ,这 种 方法 可 以 很 简单 地 对 某 
个 元 素 单独 定义 样式 ,方法 如 下 : 


<hl style="color:white;background-color:blue"> 
This isa line of Text. 
</hl> 


这 种 方法 使 用 比较 简单 .显示 直观 ,但 是 无 法 发 挥 样式 表 的 优势 ,因此 不 推荐 使 用 。 
5.2.2 内 联 样 式 表 


内 联 样式 表 是 把 样式 表 定 义 放 在 页 面 二 head 记 二 /head 二 区 域内 ,这 些 定义 的 样式 
就 应 用 到 当前 页 面 中 了 ,样式 表 是 通过 二 style 二 标记 定义 的 ,方法 如 下 : 
<head> 


<style type="text/css"> 
雪人 一 
hr {color: sienna} 
P {margin-left: 20px} 
body {background- image: url ("images/bg01.gif")} 
区 
</style> 
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</head> 


值得 注意 的 是 ,有 些 低 版 本 的 浏览 器 不 能 识别 style 标记 ,这 意味 着 低 版 本 的 浏览 器 
会 忽略 style 标记 里 的 内 容 ,并 把 style 标记 里 的 内 容 以 文本 的 形式 直接 显示 到 页 面 上 。 
为 了 避免 这 种 情况 的 发 生 ,用 HTML 注释 的 方式 (二 ! 一 一 注释 一 一 过) 隐藏 内 容 而 不 
让 其 显示 。 


5.2.3 外 联 样式 表 


如 果 很 多 网 页 都 需要 使 用 同样 的 样式 表 , 则 可 以 使 用 外 联 样式 表 。 外 联 样式 表 首 先 
将 样式 表 的 内 容 写 在 一 个 . CSS 为 后 级 的 CSS 文件 中 ,然后 在 每 一 个 需要 使 用 样式 的 网 
页 中 用 过 link 二 标记 链接 这 个 样式 文件 即 可 。 

二 link 二 标记 必须 放 到 页 面 的 二 head 记 二 /head 二 区 域内 ,这 种 方法 适合 大 型 网 站 的 
CSS 样式 定义 。 方 法 如 下 : 


<head> 
<link href="mystyle.css" rel="stylesheet" type="text/css" /> 


</head> 


上 面 的 方法 中 ,href 二 "mystyle. css" 是 CSS 文件 的 名 称 和 位 置 ,rel 王 "stylesheet" 是 
指 网 页 中 使 用 外 部 的 样式 表 ,type 一 "text/css" 是 指 文件 的 类 型 是 样式 表 文 件 。 

外 联 样式 表 文 件 可 以 应 用 于 多 个 页 面 , 当 改变 这 个 样式 表 文 件 时 ,所 有 应 用 该 样式 
的 页 面 都 随 着 改变 。 在 制作 大 量 相同 样式 页 面 的 网 站 时 ,外 联 样式 表 非 常 有 用 ,不 仅 减 
少 了 重复 的 工作 量 , 而 且 有 利于 以 后 的 修改 和 改进 ,浏览 时 也 减少 了 代码 的 重复 下 载 , 提 
高 了 浏览 速度 。 


5.2.4 导入 样式 表 

导入 样式 表 是 指 在 内 部 样式 表 的 一 style 二 里 导入 一 个 外 部 样式 表 . 导 入 时 用 @ 
import ,方法 如 下 : 

<head> 

<style type= "text/css"> 

@import"mystyle.css"; 


其 他 样式 表 的 声明 
</style> 


</head> 


这 个 方法 中 @import"mystyle. css" 表 示 导 入 mystyle. css 样式 表 , 使 用 样式 表 的 路 
径 方法 和 外 联 样式 表 的 路 径 方法 相似 。 
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在 网 页 中 使 用 CSS 的 四 种 方法 各 有 优点 ,在 实际 设计 过 程 中 ,用 户 可 以 根据 设计 的 
需要 选择 使 用 。 相 对 而 言 ,外 联 样式 表 的 应 用 更 为 广泛 。 


5.3 鞍 择 才 


通过 上 节 所 学 习 的 四 种 方法 可 以 实现 CSS 对 HTML 页 面 样式 的 控制 ,但 是 要 让 这 
些 样 式 对 HTML 页 面 中 的 元 素 实现 一 对 一 、 一 对 多 或 者 多 对 一 的 控制 ,这 就 需要 用 到 
CSS 选择 器 。HTML 页 面 中 的 元 素 就 是 通过 CSS 选择 器 进行 控制 的 ,并 赋予 各 种 样式 
声明 ,可 以 实现 各 种 效果 。 


5.3.1 选择 器 的 语法 格式 


选择 器 的 声明 语法 由 三 部 分 构成 : 选择 器 (selector), 属 性 (properties) 和 属性 的 取 
值 (value) ,基本 格式 如 下 : 


选择 器 {属性 : 值 ; 属性 : 值 } 


选择 器 可 以 是 HTML 标记 、 类 标记 和 ID 标记 ,属性 和 值 之 间 使 用 冒号 隔 开 ,如 果 需 
要 对 一 个 选择 器 指定 多 个 属性 时 ,可 以 使 用 分 号 将 所 有 的 属性 和 值 分 开 。 
例如 : 


hli{ 
font- size:16 pixels; 
font- family:Helvetica; 


} 


其 中 ,hl 是 选择 器 , 介 于 大 括号 ({)) 之 间 的 所 有 内 容 都 是 声明 部 分 。 各 个 声明 均 由 
两 部 分 组 成 : 属性 (如 font-family) 和 值 ( 如 16 pixels) ,中 间 用 冒号 (:) 分 隔 。 
在 CSS 中 ,有 三 类 选择 器 ,分 别 是 标签 选择 器 .类 选择 器 和 ID 选择 器 。 


5.3.2 ”标签 选择 器 


一 个 完整 的 HTML 页 面 是 由 很 多 不 同 的 标签 所 组 成 的 ,而 标签 选择 器 则 用 来 决定 
标签 所 采用 的 相应 CSS 样式 。 

例如 ,如 果 想 在 01. css 文件 中 对 p 标签 进行 样式 声明 ,可 以 通过 Dreamweaver 对 p 
标签 样式 进行 声明 ,具体 步骤 如 下 : 

(1) 打开 Dreamweaver, 打 开 或 新 建 一 个 需要 引用 样式 的 网 页 。 选 择 “ 窗 口 ”>“CSS 
样式 ”命令 ,打开 “CSS 样式 ”面板 ,如 图 5-1 所 示 。 

(2) 在 面板 右 下 角 单 击 “ 新 建 CSS 规则 ?按钮 是 ,弹出 “新 建 CSS 规则 ”对 话 框 ,在 “ 选 
择 器 类 型 "中 选中 “标签 (重新 定义 特定 标签 的 外 观 )" 单 选 按钮 ,在 “标签 ”下 拉 列 表 中 选 
择 p 选项 ,在 “定义 在 ”下 拉 列 表 中 选择 “新 建 样 式 表 文件 ”选项 ,如 图 5-2 所 示 。 
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选择 器 类 型 〇 类 可 应 用 于 任何 标签) C) 
加 标签 重新 定义 特定 标签 的 外 观 ) CD) 
口 高 级 ( IT、 擅 类 过 择 器 等 ) 内) 
lp  _ _ _ _ _ _ _ _ _ _ _ 转 
定义 在 ; | 新 建 样式 表 文件 司 
加 如 对 该 文档 


图 5-1 “CSS 样式 "面板 5-2 “新 建 CSS 规则 ”对 话 框 


(3) 单 击 “ 确 定 ” 按 钮 ,弹出 “保存 样式 表 文 件 为 "对 话 框 。 在 “文件 名 ”文本 框 中 输入 
“01. css”, 如 图 5-3 所 示 。 


保存 样式 表 文 件 为 


选择 文件 名 自 | 
站 点 和 服务 | 


保存 在 四): 日生 己 国 - 


0l-ess 


样式 表 文 件 (wcss) 羡 


file;///E 1/ 清华 大 学 出 版 社 /网 站 开发 与 网 页 - 


文档 阅 


在 站 点 定义 中 更 改 默认 的 链接 相对 于 
要 使 用 此 选项 ， 请 保存 文件 。 


图 5-3 “保存 样式 表 文 件 为 "对 话 框 


(4) 单 击 “ 保 存 " 按 钮 ,弹出 *p 的 CSS 规则 定义 ”对 话 框 ,在 “分 类 ”列表 框 中 选择 “类 
型 ”选项 ,设置 文字 大 小 为 12px, 颜 色 为 #009900; 选 择 “ 背 景 "选项 ,设置 背景 颜色 为 # 
990000 ,如 图 5-4 所 示 , 单 击 “确定 ?按钮 完成 设置 。 

(5) 对 应 的 CSS 代码 如 下 (01. css) 。 


pl 
font-size: 12px; 
color: #009900; 
background- color: #990000; 
} 


表示 在 页 面 中 所 有 p 标签 的 背景 都 是 #990000 (红色 ) ,文字 大 小 均 是 12px, 颜 色 为 
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p 的 C55 规则 定义 (在 01.css 中 ) 


体 素 (px) 国 粗细 四) 
变 体 信 

ER 站 大小) 

下 吧 二 四 颜色 CC) ; 本 | [#009900 

口上 :0) 

口 圳 绕 册 

闪烁 四 ) 

无 中 


[本 [一 | ET | 


5-4 设置 CSS 规则 属性 
并 009900 (绿色 )。 


5.3.3 ”类 选择 器 


类 选择 器 能 够 把 相同 的 元 素 分 类 定义 为 不 同 的 样式 ,定义 类 选择 器 时 ,在 类 的 名 称 
前 面 会 自动 加 一 个 “. "号, 用户 可 以 通过 使 用 class 一 "类 名 "的 形式 对 类 进行 名 称 指 派 。 

例如 : 用 户 想 在 网 页 内 定义 CSS 规则 ,设置 两 个 不 同 的 段落 格式 ,一 个 段落 向 右 对 
齐 , 另 一 个 段落 居中 对 齐 ,具体 步 又 如 下 : 

(1) 打开 Dreamweaver, 打 开 或 新 建 一 个 需要 引用 样式 的 网 页 。 选 择 " 窗 口 ”“CSS 
样式 "命令 ,打开 “CSS 样式 ”面板 ,如 图 5-5 所 示 。 

(2) 在 面板 右 下 角 单 击 “ 新 建 CSS 规则 ”按钮 项 ,弹出 “新 建 CSS 规则 ”对 话 框 ,在 “ 选 
择 器 类 型 "中 选中 “类 (可 应 用 于 任何 标签 ，” 单 选 按钮 ,在 "名称 ”下 拉 列 表 中 输入 
“. right”, 在 “定义 在 ”下 拉 列 表 中 选择 “ 仅 对 该 文档 ”选项 ,如 图 5-6 所 示 。 


选择 器 关 型 : @O 类 呵 应 用 于 任何 标签) 5) 
吕 标签 重新 定义 特定 标签 的 外 观 ) (I) 
口 高 级 ( ID、 伪 类 选择 器 等 )() 


名 称 : |_rieht - 
定义 在 : 〇 | 扬 建 样式 表 文件 ) 司 
到 河流 文 楼 


5-6 “新 建 CSS 规则 ”对 话 框 
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(3) 单 击 “ 确 定 ” 按 钮 ,弹出 “. right 的 CSS 规则 定义 ”对 话 框 ,在 “分 类 ”列表 框 中 选择 
“区 块 ”选项 ,设置 文本 对 齐 方 式 为 “ 右 对 齐 ”, 如 图 5-7 所 示 . 单 击 “ 确 定 ” 按 钮 完成 设置 。 


-right 的 C55 规则 定义 


字体 珊 (em】 ~ | 


宇和 而 (3) ~| 


5-7 设置 CSS 规则 属性 


(4) 使 用 相同 的 方法 设置 . center 的 CSS 规则 ,设置 文本 对 齐 方式 为 居中 对 齐 。 
(5) 在 网 页 中 输入 “段落 右 对 齐 " 文 字 , 然 后 在 CSS 面板 中 右 击 . right, 在 弹出 的 菜单 
中 选择 “套用 ”命令 即 可 实现 段落 的 右 对 齐 , 如 图 5-8 所 示 。 


而 hdobe Dreoaveaver C53 -[Es\ 清 华 大 学 出 版 社 队 贡 设 计 \ 第 五 到 \ 关 过 每 各 2.htal CTm)s] 居 | 后 
ETITIRTIEIITIETTIILEITIESITIEII3IETITIEITTIER IT 

Ww 有 

六 回 咏 | 蛋 日 国人 鱼 * 时 凡 办 -人 O-| 四 : 夺 


条 式 | 眉 落 图 弓 王 
E21 52 加 | 大 丰田 国 


图 5-8 套用 样式 
(6) 使 用 相同 的 方法 ,套用 “段落 居中 对 齐 ” 样 式 , 完 成 设置 。 
(7) 程序 代码 如 下 : 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
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<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 类 选择 器 < /title> 
<style type= "text/css"> 
Ss 
.right { 
text-align: right; 

} 
-Center { 

text-align: center; 
} 
--> 
</style> 
</head> 
<body> 
<P class="right" > 段落 右 对齐 </p> 
<P class="center" > 段落 居中 对 齐 < /p> 
</body> 
</html> 


5.3.4 ID 选择 器 


在 HTML 页 面 中 ,ID 参数 用 来 指定 某 一 元 素 ,ID 选择 器 用 来 对 这 个 元 素 定 义 单独 
的 样式 。 对 于 一 个 网 页 而 言 ,其 中 的 每 一 个 标签 均 可 使 用 id= "ID 名 称 " 的 形式 对 ID 属 


性 进行 名 称 的 指派 。 


ID 可 以 理解 为 一 个 标识 ,每 个 标识 只 能 用 一 次 。 在 定义 ID 选择 器 时 ,要 在 ID 名 称 


前 加 上 “#” 号 ,具体 建立 ID 选择 器 的 步骤 如 下 : 


(1) 打开 Dreamweaver, 打 开 或 新 建 一 个 需要 引用 样式 的 网 页 。 选 择 “ 窗 口 ” 一 “CSS 


样式 ”命令 ,打开 “CSS 样式 ”面板 ,如 图 5-9 所 示 。 


(2) 在 面板 右 下 角 单 击 “ 新 建 CSS 规则 ?按钮 琶 . 弹 出 “新 建 CSS 规则 ”对 话 框 ,在 “ 选 
择 器 类 型 "中 选中 “高 级 (ID、 伪 类 选择 器 等 )" 单 选 按钮 ,在 "选择 器 ”下拉 列表 中 选择 ”# 


intro”, 在 “定义 在 ”下 拉 列 表 中 选择 “ 仅 对 该 文档 ”选项 ,如 图 5-10 所 示 。 


选择 器 类 型 : 〇 类 呵 应 用 于 任何 标签 ) C) 
〇 标签 重新 定义 特定 标签 的 外 观 ) (I) 


加 高 级 ( ID、 伪 类 选择 器 等 ) 凡 ) 


5-9 “CSS 样式 ”面板 图 5-10 “新 建 CSS 规则 ”对 话 框 
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(3) 单 击 “ 确 定 ” 按 钮 ,弹出 “#intro 的 CSS 规则 定义 ”对 话 框 ,在 “分 类 ”列表 框 中 选 
择 “ 类 型 "选项 ,设置 相应 的 字体 、 大 小 和 颜色 .如 图 5-11 所 示 . 单 击 “ 确 定 ” 按 钮 完成 设置 。 


zintro 的 CSS 规则 定义 


Arial, Helvetica, sans-serif 

四 像素 (bx) 国 | 粗细 他 ) 
变 体 中 
国 | 巧 让 攻 而 避 大 让 写 四 
口 T 吉 WW 颜色 C); 可 | 
口上 yo) 

口 抽 Bp 二 LL) 

口内 烁 四 

口 无 中 


[mm | Lm | EL | 


5-11 设置 CSS 规则 属性 


(4) 在 网 页 中 输入 “ID 选择 器 "文字 ,然后 在 CSS 面板 中 右 击 #intro, 在 弹出 的 快捷 
菜单 中 选择 “套用 ”命令 完成 设置 ,如 图 5-12 所 示 。 


三 攻 “加 梳 王 国 CSJjsz 生 要 要 要 名 
FF | 大 人 回国 i[ 


5-12 套用 样式 


(5) 程序 代码 如 下 : 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ID 选 择 器 </title> 
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<style type= "text/css"> 

<!—— 

#intro { 
font-family: Arial, Helvetica, sans- serif; 
font- size: 12px; 
color: #FF0000; 

} 


--> 
</style> 

</head> 

<body id="intro"> 
ID 选择 器 

</body> 

</html> 


需要 提醒 的 是 : 同一 个 ID 在 一 个 页 面 中 只 能 应 用 一 次 ,而 类 则 是 用 于 描述 多 次 出 现 
的 元 素 , 可 以 多 次 应 用 。 这 从 它们 的 名 称 中 很 容易 理解 ,ID 就 类 似 元 素 的 身份 证 号 码 , 它 
必须 是 唯一 的 ,而 类 则 是 一 类 具有 共同 属性 的 元 素 的 合 称 。 


5.4 创建 和 管理 CSS 


板 可 以 方便 地 实现 CSS 的 创建 编辑 和 管理 。 当 然 , 熟 练 掌握 以 后 也 可 以 直接 在 代码 视 
图 中 进行 编写 。 


5.4.1 认识 CSS 面板 


CSS 样式 面板 集成 在 CSS 面板 组 中 ,默认 状态 下 CSS 面板 为 隐藏 状态 ,只 显示 面板 
标题 栏 ,如 图 5-13 所 示 。 单 击 CSS 面板 组 标题 栏 中 的 “CSS ?字样 或 向 右 的 三 角形 按钮 ， 
或 者 选择 “窗口 ">“CSS 样式 "命令 ,都 可 以 展开 CSS 面板 ,如 图 5-14 所 示 。 


5-13 ”隐藏 状态 下 的 CSS 面板 5-14 展开 的 CSS 面板 
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5.4.2 ”新建 CSS 


Dreamweaver 允许 用 户 自 定义 CSS 样式 ,如 果 要 自 定义 CSS 样式 , 则 在 面板 右 下 角 
单 击 “ 新 建 CSS 规则 ?按钮 是 打开 * 新 建 CSS 规则 ”对 话 框 ,如 图 5-15 所 示 。 


新 建 C55 规则 


选择 器 类 型 〇 类 呵 应 用 于 任何 标签 ) 忆 ) 
吕 标签 重新 定义 特定 标签 的 外 观 ) Cf) 


图 5-15 “新 建 CSS 规则 ”对 话 框 
选择 要 定义 的 “选择 器 类 型 "定义 "名称 ”和 “定义 在 ”之 后 , 单 击 “ 确 定 ” 按 钮 打开 
“body 的 CSS 规则 定义 ”对 话 框 ,如 图 5-16 所 示 。 在 该 对 话 框 中 可 以 根据 需要 设置 CSS 
样式 的 属性 ,如 类 型 .背景 .区 块 . 方 框 , 边 框 、 列 表 、 定 位 和 扩展 。 设 秆 完成 后 单 击 “ 确 定 ” 
按钮 即 可 新 建 一 个 CSS。 


body 的 C55 规则 定义 


诸 雪 6 ~ 粗细 全 
变 体 中 

[EET 

Ti WD) 颜色 CC): 加 | 

上 二 0) 

器 出 队 线 民 ) 

加 闪烁 @) 

口 无 @ 


[Em | ET | WT 


图 5-16 “body 的 CSS 规则 定义 "对话 框 


5.4.3 CSS 样式 表 属 性 


1.“ 类 型 "属性 


使 用 “CSS 规则 定义 ”对 话 框 中 的 “类 型 "选项 卡 可 以 设置 文本 的 相关 属性 ,如 图 5-17 
所 示 。 
CSS* 类 型 ”选项 卡 中 可 以 设置 的 相关 参数 如 下 : 

。“ 字 体 ”: 为 样式 设置 字体 。 
。“ 大 小 ”: 定义 文本 大 小 。 可 以 通过 选择 数字 和 度量 单位 选择 特定 的 大 小 ,也 可 以 
选择 相对 大 小 。 
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子 信 加 : 国 


大 小 外); 国志 :| 国 


怪 m: 古 一 国 hw 一 国 


行商 名 ): 国 | 语 E 司 大 小 写 @:| 辐 
修饰 加): 口 下 0D 颜色 避 ): 加 | 
口上 :0) 
Op 
口 W 煌 @ 
[ub 


[mm | ET | WL | 


5-17 “类 型 "选项 卡 


。“ 样 式 ”: 将 “正常 “和 斜体 ”或 “ 偏 斜体 ”指定 为 字体 样式 。 默 认 设 置 是 “正常 ”。 

。“ 行 高 ”: 设置 文本 所 在 行 的 高 度 。 

。“ 修 饰 ”: 文字 的 修饰 效果 ,包括 "下 划 线 "“ 上 划 线 "“ 删 除 线 "“ 闪 烁 > 和 "无 ”。 

*。“ 粗 细 ”: 设置 字体 的 粗细 ,可 以 设置 为 相对 粗细 ,也 可 以 设置 为 具体 的 数值 。 

*。“ 变 体 ”: 包括 “正常 "和 “小 型 大 写字 母 ”, 因 为 英文 中 的 大 写字 母 比较 大 ,采用 “小 
型 大 写字 母 " 设 置 可 以 缩小 大 写字 母 。 

。“ 大 小 写 ”: 包括 “ 首 字母 大 写 ”“ 大 写 ”“ 小 写 ” 和 “无 ”, 主 要 是 设置 字母 大 小 写 
规则 。 

。“ 颜 色 ”: 设置 字体 的 颜色 。 


2.“ 背 景 "属性 


打开 “style 的 CSS 规则 定义 ”对 话 框 ,选择 “分 类 ”列表 框 中 的 “背景 "选项 卡 , 该 选项 
卡 可 用 于 设置 网 页 背景 属性 ,如 图 5-18 所 示 。 


style 的 CSS 规则 定义 


[CE 
EET 


图 5-18 “背景 "选项 卡 
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CSS“ 背 景 ?选项 卡 中 可 以 设置 的 相关 参数 如 下 : 


背景 颜色 : 通过 选 色 器 选择 一 种 颜色 作为 背景 

背景 图 像 : 通过 浏览 按钮 选择 一 张 图 像 作为 背景 图 像 。 

重复 : 包括 “不 重复 ”“ 重 复 ”“ 横 向 重复 ”、“ 纵 向 重复 ”定义 是 否 重复 以 及 如 何 
重复 背景 图 像 。 

附件 : 包括 “固定 ”和 *“ 深 动 ”, 用 来 设置 背景 图 像 跟 不 跟随 网 页 一 起 深 动 ,因此 , 设 
计 者 可 以 设计 一 张 足够 大 的 图 片 作为 网 页 背景 。 

水 平 位 置 和 垂直 位 置 : 设置 背景 图 像 相对 于 元 素 的 初始 位 置 ,这 里 的 元 素 包括 网 
页 .表格 ,文本 等 。 


3.“ 区 块 " 属 性 


打开 “CSS 规则 定义 ”对 话 框 ,选择 “分 类 ”列表 框 中 的 “区 块 ” 选 项 卡 , 该 选项 卡 可 用 
于 设置 区 块 的 相关 属性 ,如 图 5-19 所 示 。 


区 块 


分 类 
单词 间距 G) Z| 
字母 间距 [Es | 
二 
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文本 对 齐 四 
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CSS* 区 块 ” 选 项 卡 中 可 以 设置 的 相关 参数 如 下 : 


。 单 词 间 距 : 包括 “正常 "和 *“( 值 )” 两 个 设 定 , 值 的 单位 是 像素 ,用 来 设置 英文 单词 
之 间 的 距离 。 数 值 为 正 数 则 增加 间距 ,负数 则 减 小 间距 。 


。 字 母 间 距 : 包括 “正常 "和 “( 值 )” 两 个 设 定 , 值 的 单位 是 像素 ,用 来 设置 英文 字母 


或 中 文 之 间 的 距离 。 数 值 为 正 数 则 增加 间距 ,负数 则 减 小 间距 。 


。 垂直 对 齐 : 用 来 设置 对 象 的 垂直 对 齐 方式 (不 仅 包括 文本 ,还 有 图 像 等 ) ,包括 * 基 


线 ”“ 下 标 "“ 上 标 ”“ 顶 部 ”“ 文 本 顶 对 齐 ”“ 中 线 对 齐 ”“ 底 部 ”“ 文 本 底 对 齐 ”， 
或 者 使 用 数值 来 设 定 ,数值 的 单位 是 百分比 。 
文本 对 齐 : 设置 文本 的 水 平 对 齐 方 式 。 


。 文字 缩 进 : 设置 文本 的 首 行 缩 进 ,类 似 于 Word 的 缩 进 功能 ,方法 是 结合 数值 和 


单位 。 如 果 中 文 要 缩 进 两 个 字符 ,习惯 使 用 与 字体 同样 的 单位 ,数值 是 字体 大 小 
的 两 倍 , 如 字体 设置 为 12pt, 那 么 缩 进 量 就 应 该 是 24pt。 
空格 : 控制 源 代码 中 的 文字 空格 ,“ 正 常 ” 选 项 将 忽略 源 代码 中 文字 之 间 的 所 有 空 
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格 ;* 保 留 ” 选 项 则 保留 源 代码 中 所 有 的 空格 形式 ,包括 空格 、 制 表 符 和 回 车 ;“ 不 换 
行 ” 选 项 设置 文字 不 自动 换行 . 仅 当 遇 到 HTML 的 换行 标签 二 br 二 时 才 换 行 。 
。 显示 : 指定 是 否 显 示 元 素 以 及 如 何 显示 元 素 ,如 果 选 择 “ 无 ” 则 关闭 CSS 样式 被 指 
定 给 的 元 素 的 显示 。 
4.“ 方 框 属 性 
打开 “body 的 CSS 规则 定义 "对 话 框 ,选择 "分 类 "列表 框 中 的 ” 方 框 ?选项 卡 ,该 选项 
卡 可 用 于 设置 方 框 的 相关 属性 : 宽 、 高 ,浮动 清除 ,填充 和 边界 等 ,如 图 5-20 所 示 。 


body 的 C55 规则 定义 


[BD 辆 
Ed 国 
界 


回 全 部 相同 全 ) 
上 四 [iS 
万 @: | 
a) 下 包 [ELI 
司 | 霸 @:[ | 


5-20 “ 方 框 "选项 卡 


CSS* 方 框 ”选项 卡 中 可 以 设置 的 相关 参数 如 下 : 

。 宽 和 高 : 设置 元 素 的 宽度 和 高 度 。 宽 和 高 定义 的 对 象 多 为 图 片 表格. 层 等 。 

。 浮动 : 设置 元 素 浮 动 方式 (如 文本 、` 层 .表格 等 ) ,功能 类 似 于 Word 的 图 片 文 字 环 
绕 功 能 。 若 定义 浮动 为 " 左 对 齐 ”, 环 绕 的 文本 自动 排列 在 应 用 了 该 样式 元 素 的 右 
侧 , 若 定义 为 " 右 对 齐 ”, 环 绕 的 文本 自动 排列 在 应 用 了 该 样式 元 素 的 左 侧 。 

。 清除 : 不 允许 元 素 的 浮动 。“ 左 对 齐 " 表 示 不 允许 左边 有 浮动 对 象 ， 右 对 齐 "表示 
不 允许 右边 有 浮动 对 象 “ 两 者 "表示 人 允许 两 边 都 可 以 有 浮动 对 象 ,“ 无 ”表示 不 允 
许 有 浮动 对 象 。 

。 填充 : 指定 元 素 内 容 与 元 素 边框 (如 果 没 有 边框 , 则 为 边 距 ) 之 间 的 间距 ,比较 适 
合 表格 的 设置 。 

。 全 部 相同 : 将 相同 的 填充 属性 设置 为 元 素 的 “上 ”*“ 右 “下 ”和 “ 左 " 侧 ,取消 选择 
“全 部 相同 ”选项 可 设置 元 素 各 个 边 的 填充 。 

。 边界 : 指定 一 个 元 素 的 边框 与 男 一 个 元 素 之 间 的 间距 。 

。 全 部 相同 : 将 相同 的 边 距 属性 设置 为 元 素 的 “上 ”“ 右 ”“ 下 ”和 “ 左 ” 侧 ,取消 选择 
“全 部 相同 ”可 设置 元 素 各 个 边 的 边 距 。 
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5s.“ 边 框 属 性 


打开 “body 的 CSS 规则 定义 ”对 话 框 ,选择 “分 类 ”列表 框 中 的 “边框 "选项 卡 ,该 选项 卡 
可 用 于 设置 边框 的 相关 属性 : 上 、 下 、 左 、 右 边框 的 “样式 “宽度”" 和 “颜色 ”, 如 图 5-21 所 示 。 


回 全 部 相同 E) ， 回 全 部 相同 E) 
bd 国 | 访 来 Gx) ~ 
~ 加 [3 有 着 7 
> | 体 案 6 

v|| 便 于 Ga > 


5-21 “边框 "选项 卡 


CSS" 边 框 ”选项 卡 中 可 以 设置 的 相关 参数 如 下 : 

。 样式 : 设置 边框 的 样式 外 观 ,选项 有 “点 划 线 ”“ 虚 线 "“ 实 线 "“ 双 线 "“ 槽 状 ”、 
“ 疹 状 > 凹陷 ?“ 突 出 ?等 ,但 显示 的 效果 取决 于 浏览 器 。 

。 全 部 相同 : 将 相同 的 边框 样式 属性 设置 上” “ 右 ”“ 下 ?和 "* 左 ? 侧 , 取 消 选择 "全 

部 相同 ”可 设置 元 素 各 个 边 的 边框 样式 。 

宽度 : 设置 元 素 四 个 方向 边框 的 粗细 , 预 设 值 有 “ 粗 ”“ 中 ”“ 细 ”, 也 可 以 手工 设 

置 值 。 

。 全 部 相同 : 将 相同 的 边框 宽度 设置 “上 ”“ 右 ” “下” 和“ 左 ” 侧 ,取消 选择 “全 部 相 
同 ” 可 设置 元 素 各 个 边 的 边框 宽度 。 

。 颜色: 设置 边框 的 颜色 。 可 以 分 别 设置 每 个 边 的 颜色 ,但 显示 效果 取决 于 浏 
览 器 。 

。 全 部 相同 : 将 相同 的 边框 颜色 设置 元 素 的 “上 ”“ 右 ” “下” 和“ 左 ” 侧 ,取消 选择 
“全 部 相同 ”可 设置 元 素 各 个 边 的 边框 颜色 。 


6.“ 列 表 ” 属 性 


打开 “body 的 CSS 规则 定义 "对话 框 ,选择 “分 类 ”列表 框 中 的 “列表 ”选项 卡 , 该 选项 
卡 中 的 功能 用 来 设置 列表 的 相关 属性 ,如 项 目 符号 图 像 、 位 置 ,如 图 5-22 所 示 。 
CSS* 列 表 ” 选 项 卡 中 可 以 设置 的 相关 参数 如 下 : 
。 类 型 : 设置 项 目 符号 或 编号 的 外 观 。 
。 项 目 符号 图 像 : 可 以 为 项 目 符号 指定 自 定义 图 像 , 方 法 是 单 击 “ 浏 览 ” 选 择 图 像 文 
件 或 直接 输入 图 像 的 路 径 。 
。 位 置 : 设置 列表 项 目 缩 进 的 程度 ,选择 “外 ”, 列 表 贴 近 左 侧 边框 ;选择 “内”, 列表 


So 使 用 css 美化 “北京 奥运 吉祥 物 福娃 ”网 站 131 


body 的 C55 规则 定义 


图 5-22 “列表 ”选项 卡 
向 右 缩 进 。 
7.“ 定 位 ”属性 


打开 *body 的 CSS 规则 定义 ”对话 框 ,选择 "分 类 ”列表 框 中 的 "定位 ”选项 卡 ,该 选项 卡 
可 用 于 设置 定位 相关 属性 ,如 类 型 .显示 、 宽 ,高 Z 轴 、 溢 出 \ 定 位 和 剪辑 ,如 图 5-23 所 示 。 


body 的 CSS 规则 定义 


加 示 9 
国 | 放 来 6x) ~ 加 
国 | 亲 索 x) ~ KE 四 


LG 上 便于 Ge) ~ 
[二 本 5 司 || 太 包 信 素 G8) 
[_ 画 本 司 | 下 四 国信 未 cx) ~ 
[一半 || 去 ET 


图 5-23 “定位 "选项 卡 


CSS* 定 位 ”选项 卡 中 可 以 设置 的 相关 参数 如 下 : 

。 类 型 : 确定 浏览 器 应 如 何 来 定位 层 , 包 括 “ 绝 对 ”“ 相 对 ”“ 静 态 ” 和 “固定 ”选项 。 
。 显示 : 确定 层 的 初始 显示 条 件 。 如 果 不 指定 可 见 性 属性 , 则 默认 情况 下 大 多 数 浏 
览 器 都 继承 父 级 的 值 。 可 供 选 择 的 可 见 性 选项 包括 “继承 ” “可见 ” “隐藏 ”。 

Z 轴 : 确定 层 的 堆 秋 顺序 ,编号 较 高 的 层 显示 在 编号 较 低 的 层 的 上 面 。 值 可 以 为 
正 , 也 可 以 为 负 。 

溢出 ( 仅 限 于 CSS 层 ) : 设置 层 的 内 容 超 出 它 的 大 小 时 将 发 生 的 情况 ,这 些 属性 控 
制 如 何 处 理 此 扩展 。 
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。 定位 : 指定 层 的 位 置 和 大 小 。 浏 览 器 如 何 显示 位 置 取 决 于 “类 型 "设置 。 如 果 层 
的 内 容 超出 指定 的 大 小 . 则 大 小 值 不 起 作用 。 

。 剪辑 : 定义 层 的 可 见 部 分 ,这 个 部 分 是 一 个 矩形 区 域 ,由 坐标 来 描述 。 坐 标的 相 
对 圆 点 是 层 的 左上 角 的 顶点 ,对 应 的 值 是 * 左 ”和 “上 ”, 右 下 角 的 顶点 对 应 的 值 是 
“ 右 ”" 和 “下 ”。 如 果 指 定 了 剪辑 区 域 . 可 以 通过 脚本 语言 (如 JavaScript) 访 问 它 ， 
并 操作 属性 以 创建 像 “ 擦 除 ” 这 样 的 特殊 效果 。 


8.“ 扩 展 ” 属 性 
打开 “body 的 CSS 规则 定义 ”对 话 框 ,选择 “分 类 ”列表 框 中 的 “扩展 ”选项 卡 , 该 选项 


body 的 C55 规则 定义 


图 5-24 “扩展 "选项 卡 


CSS* 扩 展 ” 选 项 卡 中 可 以 设置 的 相关 参数 如 下 : 

。 分页: 当 需 要 打印 网 页 时 ,可 以 在 样式 所 控制 的 对 象 之 前 或 者 之 后 强行 插入 一 个 
分 页 符 , 选 择 的 内 容 包 括 “ 之 前 ”和 “之 后 ”它们 的 候选 项 都 是 一 样 的 ,包括 “ 自 
动 "“ 总 是 ”“ 左 对 齐 ”“ 右 对 齐 ”。 

。 光标 : 位 于 “视觉 效果 ”选项 区 的 “光标 ”选项 用 来 设置 光标 显示 属性 。 

。 过 滤器 : 又 称 CSS 滤 镜 ,对 样式 所 控制 的 对 象 应 用 特殊 效果 ,有 了 滤 镜 属性 ,页 面 
才 变 得 更 加 漂亮 。 


5.4.4 管理 CSS 


1. 链接 或 导入 外 部 样式 表 


单 击 “CSS 样式 ”面板 中 的 “附加 样式 表 ” 按 钮 较 .打开 ”链接 外 部 样式 表 ” 对 话 框 , 如 
图 5-25 所 示 。 单 击 “ 浏 览 ” 按 钮 ,打开 “选择 样式 表 文 件 ” 对 话 框 ,从 中 选择 一 个 已 经 存在 
的 外 部 样式 表 文 件 , 单 击 “ 确 定 ” 按 钮 返回 ,当前 网 页 即 应 用 了 此 外 部 样式 表 。 
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链接 外 部 样式 表 


文件 /WEL 四 )，|file:///E1/ 清 华 大 学 出 版 社 /网 站 开国 
添加 为 : 四 链接 已) 
口 导 入 加 


媚 体 虽 v 
您 也 可 以 输入 去 号 分 隔 的 媒体 类型 列表 。 


Dreanwesaver 的 范 全 样式 表 可 以 帮助 您 起 步 。 


5-25 “链接 外 部 样式 表 ” 对 话 框 


2. 编辑 CSS 样式 表 


在 "CSS 样式 ?面板 中 选中 一 个 CSS 样式 , 单 击 * 编 辑 样式 ?按钮 国 , 则 再 次 打开 “CSS 
规则 定义 ”对 话 框 ,在 其 中 可 以 更 改 样式 的 各 项 属性 ,也 可 以 选中 一 个 CSS 样式 后 直接 在 
“CSS 样式 ”面板 中 进行 修改 。 

如 果 一 个 CSS 样式 不 再 使 用 , 则 可 以 将 其 删除 ,方法 是 在 *CSS 样式 ”面板 中 选中 一 
个 CSS 样式 ,然后 单 击 * 删 除 CSS 规则 ”按钮 国 即 可 。 


3. 导出 样式 表 

右 击 “CSS 样式 ”面板 中 要 导出 的 内 联 样式 ,选择 “移动 CSS 规则 ”命令 ,打开 “ 移 至 外 
部 样式 表 ” 对 话 框 。 选 择 “ 新 样式 表 " 单 选 按 钮 , 单 击 “ 确 定 "按钮 。 在 打开 的 对 话 框 中 输 
入 样式 表 的 名 称 , 单 击 * 保 存 " 按 钮 即 可 实现 将 一 个 内 联 样 式 表 导出 保存 为 一 个 单独 的 样 
式 表 文 件 。 


5.5 和 样 父 珍 属 性 


5.5.1 CSS 的 文字 属性 


文字 是 一 个 网 页 的 核心 部 分 ,CSS 文字 属性 可 以 定义 文字 的 字体 、 大 小 和 粗细 等 许 
多 外 观 属性 ,CSS 的 文字 属性 如 表 5-1 所 示 。 
表 5-1 CSS 的 文字 属性 


字体 属性 说 明 属性 参数 
font-family 字体 所 有 有 效 字体 
font-style 文字 样式 Normal( 正 常 )、Italic( 斜 体 )、Oblique( 偏 斜体 ) 
font-weight 字体 粗细 Normal( 正 常 ) .bold( 粗 体 ) .bolder( 特 粗 体 ) ,lighter( 特 细 体 ) 
font-variant 字体 变 体 Normal( 正 常 ).small-caps( 小 型 大 写字 母 ) 
font-size 字体 大 小 绝对 值 `. 相 对 值 


【实例 5-1】 文字 属性 综合 实例 。 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 


和 Mainsarid 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<title> 文 字 属 性 综合 实例 < /title> 

<style type= "text/css"> 

ee 

body { 
font-family: "黑体 "; 
font-size: 20px; 
font-style: italic; 
font-weight: bold; 
font-variant: small- caps; 

} 

span { 
color: #0000FF; 
text-decoration: underline; 

} 

--> 

</style> 

</head> 

<body> 

<span> 字 体 属性 </span> 

:黑体 </p> 

3 :20px< /p> 

<p> 字 体 样式 :斜体 < /p> 

<p> 字 体 粗细 : 粗 体 < /p> 

<p> 字 体 变 体 (font- variant) :小 型 大 写字 母 (small- caps) </p> 

</body> 

</html> 


显示 效果 如 图 5-26 所 示 。 


当 文 字 必 性 综合 实例 - Microsoft Internet Explorer 
文件 四 编辑) 查看 WW) 收 总 和 ) 工具 0) 帮助 0 


@ -昌国 国 的 |Par 宙 wmx @| 会 -如 回 - 


他 从属 糙 
E/E 


个 号 : 20PX 


他 从 莅 式 : 税 供 
他 从 才 册 : 者 傣 
字 捧 杰作 (FONT-VARIANT) : 小 型 太 写 字 纯 (SUALL -CAPS) 


时 我 的 电脑 


图 $-26 文字 属性 综合 实例 效果 图 
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5.5.2 CSS 的 文本 属性 


文本 属性 用 来 控制 网 页 中 的 文本 显示 效果 ,例如 颜色 .间距 和 首 行 缩 进 等 合理 的 应 
用 ,常用 的 文本 属性 如 表 5-2 所 示 。 


表 5-2 CSS 的 文本 属性 


文本 属性 说 明 属性 参数 
text-indent 首 行 缩 进 | 长 度 单位 .百分比 单位 
text-align 文本 对 齐 | left ( 居 左 ,默认 值 )、right ( 居 右 ) .center (居中 ) ,justify (两 端 对 齐 ) 


none (无 ,默认 值 )、underline (下 划 线 )、overline (上 划 线 ) line- 
through( 当 中 划 线 ) 

normal (默认 值 ) ,length、percentage (百分比 ,相当 于 父 对 象 高 度 的 
百分比 ) 


颜色 值 


text-decoration 文字 效果 


line-height 行 高 属性 


color 字体 颜色 


【实例 5-2】 文本 属性 综合 实例 。 


<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content= "text/html; charset=GB2312" /> 
<title> 文 本 属性 综合 实例 < /title> 

<style type= "text/css"> 

站 是 和 = 

body{ line-height:2; color:#0000FF; font-size:18px;} 
.Shsj{ text- indent:60px;} 

.Center{ text-align: center} 

.Xiaoguo{ text-decoration:underline;} 

--> 

</style> 

</head> 

<body> 

<p> 文 本 属性 < /p> 

<p class="shsj"> 首 行 缩 进 :60px< /p> 

<p class="xiaoguo"> 文 字 效果 :underline (下 划 线 )< /p> 
<p class="center"> 文 本 对 齐 : 居 中 对 齐 </p> 
<p> 行 高 属性 :2 倍 行 高 < /p> 

<p> 字 体 颜 色 : 蓝 色 < /p> 

</body> 

</html> 


显示 效果 如 图 5-27 所 示 。 
5.5.3 CSS 的 背景 属性 


使 用 背景 属性 可 以 丰富 页 面 显示 效果 ,改变 网 页 的 整体 风格 ,常用 背景 属性 如 表 5-3 
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吾 文字 属性 综合 实例 - Wicrosoft Internet Explorer 
文件 中 蝙 辑 罗 ) 查看 G) 收 豪 &) 工具 和 助 0D 


日 - 国 国 纹 记 时 次 加 从 -学 回 - 


首 行 缩 进 : 60px 
文字 效果 : underline (下 划 线 ) 
文本 对 齐 : 居中 对 齐 
行 高 属性 : 2 倍 行 高 


字体 颜色 : 蓝 色 


5-27 文本 属性 综合 实例 效果 图 


表 5-3 CSS 的 背景 属性 


background-color 背景 颜色 RGB transparent 
background-image 背景 图 像 url .none 


Repeat( 完 全 填充 )、repeat-x (水 平 填充 )、repeat-y 
back d- 天 下 
re (垂直 填充 ) ,no-repeat( 不 重复 填充 元 素 ) 


sg Scroll( 文 字 页 面 滚 动 时 ,背景 一 起 滚动 )、Fixed( 文 
background-attachment 固定 背景 图 片 字 页 面 滚动 时 ,背景 固定 不 滚动 ) 


background-position 背景 图 片 位 置 Top ,center bottom ,left ,right 


所 示 。 
【实例 5-3】 背景 属性 综合 实例 。 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> 
<title> 背 景 属性 综合 实例 < /title> 
<style type= "text/css"> 
过 是 圭 二 
body { 
font-family: "黑体 "; 
font-size: 16px; 
color: #000000; 
background- color: #00CCFF; 
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div{ background- color:#FFFFFF; 
background- image: url (xuehua.jpg); 
background- repeat: repeat; 
background-attachment :scroll; 

} 

--> 

</style> 

</head> 

<body> 

<div> 

<hl> 背 景 属性 综合 实例 < /h1> 

<p> 页 面 背景 颜色 : 蓝 色 < /p> 
<p> 背 景 图 像 :雪花 </p> 

<Pp> 背 景 填充 :Repeat( 完 全 填充 )< /p> 
<pP> 固 定 背景 图 片 :Scrol1( 文 字 页 面 滚动 时 ,背景 一 起 滚动 )< /p> 
</div> 

</body> 

</html> 


显示 效果 如 图 5-28 所 示 。 


下 背景 属性 综合 实例 - Microsoft Internet Explorer 回回 加 


;| 文件 @) 编辑 下 ) 查看 WD 收藏 和 ) 工具 CD) 帮助 人 0 


|B 后 - 日- 国 四 的 | 有 Par 容 wmx 加 | 全- 县 


; 地 直 加 ) | 全] 设计 \ 第 05 章 使 用 css 美 化 “北京 奥运 吉祥 物 -福娃 ”网 站 \ 实 例 \5-3 kx 回国 | 加 并 到 


背景 填充 ， Repeat (完全 填充 ) 
固定 表 景 图 片 ，scrol | (文字 页 面 深 动 时 ， 背 景 一 起 滚动 


图 5-28 背景 属性 综合 实例 效果 图 


5.6 CSS+DIV 玩 行 网 页 布局 


网 页 设计 中 比较 重要 也 是 比较 困难 的 工作 是 进行 网 页 布局 设计 ,好 的 网 页 布局 能 够 
令 访 问 者 耳目 一 新 ,并 且 很 容易 在 页 面 中 找到 所 需要 的 信息 。 无 论 使 用 表格 还 是 CSS， 
网 页 布局 都 是 把 整 块 的 内 容 放 到 网 页 的 不 同 区 域 。 使 用 CSS 布局 的 特点 是 能 够 将 网 页 


内 容 和 样式 分 离开 ,使 页 面 和 样式 的 调整 变 得 更 加 方便 ,大 大 简化 了 网 页 的 代码 。 
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5.6.1 <div> 与 <span> 标 记 


在 使 用 CSS 布局 的 网 页 中 ,二 div 记 与 二 span 放 都 是 最 常用 的 标记 ,利用 这 两 个 标 
记 , 再 加 上 CSS 对 其 样式 的 控制 ,可 以 灵活 方便 地 实现 网 页 的 布局 。 

和 其 他 标记 不 同 的 是 ,二 div 之 和 一 span 二 对 于 它们 所 包含 的 元 素 是 没有 意义 的 。 如 
<hl 盖 一 /hl 之 标记 说 明 里 面 是 标题 ,二 p 之 和 二 /p> 标 记 说 明 里 面 是 一 个 段落 ,但 是 一 div 之 
与 王 span 二 并 没有 这 样 的 意义 。 

所 div 二 只 是 一 个 分 块 的 元 素 , 它 可 以 将 网 页 分 成 几 个 区 块 , 过 div 之 里 面 可 能 包含 标 
题 . 段 落 .图片 在 内 的 很 多 元 素 , 甚 至 也 可 以 再 包含 一 div 之 。 而 志 span 之 是 一 个 行 级 元 
素 , 通 常情 况 下 用 来 定义 一 小 段 文字 的 样式 ,二 span 过 与 一 div 之 的 最 大 区 别 是 二 div 二 会 
造成 换行 ,而 一 span 二 则 不 会 。 

【实例 5-4】 一 div 之 与 二 span 过 标记 综合 实例 。 


<html xmlns= "http://www.w3.org/1999/xhtm1"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 无 标题 文档 < /title> 
<style type= "text/css"> 
es 
div { 
background- color: #00CCFF; 
width:30%; 
} 
span{ 
background-color:#CC6600; 
width:30%; 
} 
--> 
</style> 
</head> 
<body> 
<div><hl>div 标 记 < /hl></div> 
<div>div 标 记 : 换 行 < /div> 
<div>div 标记: 换行 < /div> 
<div>div 标 记 : 换 行 < /div> 
<span><hl>span 标记 < /hl>< /span> 
<span> span 标记 :不 换行 < /span> 
<span> span 标记 :不 换行 < /span> 
<span> span 标记 :不 换行 < /span> 
</body> 
</html> 


显示 效果 如 图 5-29 所 示 。 


当 无 标题 文档 - 了 icrosoft Internet Explorer 
文件 四 ” 蝙 辑 区 ) 查看 G) 收 豪 Q) 工具 立 ) 帮助 0D 
@aa- 日 - 国 国 的 Ps 赤 wmx @@| 人 - 电 问 - 


地 址 @) | 


图 5-29 一 div 过 与 一 span 二 标记 综合 实例 效果 图 


5.6.2 盒子 模型 


盒子 模型 是 CSS 布局 中 非常 重要 的 模型 ,只 有 掌握 了 盒子 模型 才能 更 加 有 效 地 控制 
页 面 中 元 素 的 位 置 。 网 页 中 的 所 有 元 素 都 可 以 看 成 是 一 个 盒子 ,盒子 模型 通过 创建 容器 
样式 来 反映 元 素 之 间 的 关系 以 及 元 素 自 身 的 样式 。 一 个 盒子 由 4 个 独立 部 分 组 成 ,如 
图 5-30 所 示 。 


MARGIN 边界 
BORDER 边框 
PADDING 


X09 一 —— 


图 5-30 ”盒子 模型 
(1) 最 外 面 的 部 分 是 边界 (margin) 。 
(2) 第 二 部 分 是 边框 (border) ,边框 可 以 有 不 同 的 样式 。 
(3) 第 三 部 分 是 填充 (padding) ,填充 用 来 定义 内 容 区 域 与 边框 (border) 之 间 的 


内 


白 


(4) 第 四 部 分 是 内 容 区 域 (content) 。 
当 使 用 CSS 定义 盒子 的 width 和 height 时 ,定义 的 并 不 是 内 容 区 域 、 填 充 .边框 和 边 
界 所 占 的 总 区 域 ,而 是 内 容 区 域 content 的 width 和 height。 为 了 计算 盒子 所 占 的 实际 
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区 域 必 须 加 上 padding、border 和 margin, 即 : 
实际 宽度 = 左边 界 十 左边 框 十 左 填充 十 内 容 宽 度 (width) 十 右 填 充 十 右边 框 十 右边 界 
实际 高 度 二 上 边界 十 上 边框 十 上 填充 十 内 容 高 度 (height) 十 下 填充 十 下 边框 十 下 边界 


1. 边界 属性 


边界 属性 用 来 定义 所 选 容器 的 外 面 距离 边框 外 部 的 距离 ,这 些 属性 包括 margin- 
top、margin-right .margin-bottom、margin-left, 而 margin 属性 可 以 用 来 一 次 性 设置 容器 
各 个 边界 的 边 距 ,而 不 必 分 别 定 义 不 同 的 部 分 。 


2. 边框 属性 


边框 宽度 属性 用 来 指定 容器 边框 的 宽度 ,边框 属性 包括 border-top-width、border- 
right-width、border-bottom-width 和 border-left- width ,而 border-width 属性 是 一 次 性 指 
定 所 有 边框 宽度 的 快捷 属性 。 

边框 颜色 属性 用 来 指定 容器 上 、 下 、 左 、 右 边框 的 颜色 ,边框 颜色 属性 包括 border- 
top-color border-right-color, border-bottom-color 和 border-left-color， 而 border-color 
属性 是 一 次 性 指定 所 有 边框 颜色 的 快捷 属性 。 

边框 样式 属性 用 来 指定 容器 的 边框 样式 ,边框 样式 属性 包括 border-top-style、 
border-right-style、border-bottom-style 和 border-left-style, 而 border-style 属性 是 一 次 
性 指定 所 有 边框 样式 的 快捷 属性 。 


3. 填充 属性 


填充 属性 是 指 容器 内 容 距 离 边框 的 距离 ,填充 属性 包括 padding-top、padding-right、 
padding-bottom 和 padding-left, 而 padding 属性 是 用 来 一 次 性 设置 四 边 填 充 距离 的 快捷 
属性 。 


4. 属性 简写 


边界 、 边 框 和 填充 都 分 为 上”“ 下 ”“ 左 ”“ 右 ”四 个 方向 , 既 可 以 分 别 定 义 ,也 可 以 
统一 定义 。 分 别 定义 时 可 以 按照 规定 的 顺序 ,给 出 2 个 .3 个 或 者 4 个 属性 值 ,它们 的 含 
义 将 有 所 区 别 ,具体 含义 如 下 : 

(1) 如 果 给 出 2 个 属性 值 ,前 者 表示 上 下 边框 的 属性 ,后 者 表示 左右 边框 的 属性 , 例 
如 : border-color:red green。 

(2) 如 果 给 出 3 个 属性 值 ,前 者 表示 上 边框 的 属性 ,中 间 的 数值 表示 左右 边框 的 属 
性 ,后 者 表示 下 边框 的 属性 ,例如 : border-width:1px 2px 3px。 

(3) 如 果 给 出 4 个 属性 值 ,依次 表示 上 、 右 、 下 、 左 的 属性 , 即 顺 时 针 排 序 。 例 如 : 
border-style: dotted dashed solid double。 
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【实例 5-5】 盒子 模型 综合 实例 。 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type"c /> 
<title> 盒 子 模型 综合 实例 < /title> 
<style type= "text/css"> 

= 

div { 

font- size:30px; 

color:#FF0000; 

text-align:center; 

} 

#box { 

height:180px; 

width:250px; 

margin:50px; 

padding:50px; 

border-top:solid 60px #0066FF; 
border-right:solid 30px #FF3333; 
border-bottom:solid 60px #0066FF; 
border-left:solid 30px #FF3333; 
background- color:#CC99cCCc; 

} 

--> 

</style> 

</head> 

<body> 

<div id="box"> 盒 子 模型 综合 实例 < /div> 
</body> 

</html> 


显示 效果 如 图 5-31 所 示 。 
5.6.3 元素 的 定位 


在 网 页 设计 中 ,各 种 元 素 都 必须 有 自己 合理 的 位 置 ,从 而 搭建 起 页 面 的 结构 。 元 素 
的 定位 一 直 是 Web 标准 中 的 难点 ,很 多 初学 者 对 此 都 是 一 知 半 解 ,没有 建立 起 一 个 完整 
的 ,清晰 的 认识 。 如 果 不 能 够 理解 CSS 定位 的 原理 ,那么 将 不 能 够 实现 所 需要 的 效果 , 接 
下 来 介绍 一 些 CSS 中 常用 的 定位 语句 。 


1. float 定位 


float 浮动 属性 是 元 素 定位 中 非常 重要 的 属性 ,通过 对 div 元 素 应 用 浮动 属性 进行 定 
位 ,不 但 对 整个 版 式 进行 规划 ,也 可 以 对 一 些 基 本 元 素 如 导航 等 进行 排列 。float 可 以 达 
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池 合子 模型 综合 实例 - 了 icrosoft Internet Explorer 
文件 到 编 得 邓 ) 查看 oJ， 收 赢 @)， 工具 0) 帮助 只 


Om- 日 国 国 纹 有 轩 次 Wx 如 | 全 -总 回 "对 国 


5-31 ”盒子 模型 综合 实例 效果 图 


到 这 样 一 个 效果 ,本 来 应 该 一 行 一 个 的 div 块 元 素 ,如 果 定 义 了 float 属性 , 则 只 要 行 的 空 
间 足 够 , 它 会 定位 到 前 一 个 div 元 素 的 后 面 ,而 不 再 单独 占用 一 行 。float 的 语法 如 下 : 


float:nonelleftlright 


其 中 none 是 默认 值 ,表示 元 素 不 浮动 ;left 表示 元 素 浮 在 左边 ;right 表示 元 素 浮 在 
右边 。 

CSS 允许 任何 元 素 浮动 ,不 论 是 图 像 .段落 还 是 列表 ,也 不 论 元 素 先前 是 什么 状态 ， 
浮动 后 都 变 成 块 级 元 素 。 

float 属性 较 难 理解 ,下 面 通过 几 个 实例 来 说 明 它 的 工作 原理 。 

【实例 5-6】 没有 设 定 float 属性 实例 。 


< !DOCTYPE html PUBLIC "~-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
Org/TR/xhtml1/DTD/xhtmll- transitional .dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 没 有 设 定 float 属性 < /title> 
<style type= "text/css"> 
演 守 二 吉 
#divil { 
background: #00FF007 
border: lpx solid #000099; 
height: 60px; 
width: 200px; 


margin:2px; 
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#div2 { 
background: #00FF00; 
border: lpx solid #000099; 
height: 60px; 
width: 200px; 
margin:2px; 
} 
--> 
</style> 
</head> 
<body> 
<div id="div1"> 这 是 divl< /div> 
<div id="div2"> 这 是 div2< /div> 
</body> 
</html> 


如 果 float 取 值 为 none 或 者 没有 设置 float 时 ,不 会 发 生 任何 浮动 ,此 时 div 元 素 单 
独占 一 行 , 紧 随 其 后 的 div 元 素 将 在 下 一 行 中 显示 ,显示 效果 如 图 5-32 所 示 。 


潮 没 有 设 定 float 属 性 - Microsoft Internet Explorer 
文件 下 蝙 辑 到 ) 查看 人 收 诚信 ) 工具 CD) 帮助 0D 


四 晶 - 目 - 国 国 的 几时 殉 tmx 如 内 -学 回 - 


图 5-32 没有 设 定 float 属性 的 实例 效果 图 


【实例 5-7】 应 用 float 向 左 浮动 属性 实例 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtmll1/DTD/xhtmll- transitional .dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 应 用 float 向 左 浮动 属性 </title> 
<style type= "text/css"> 
过 六 二 县 
#divl { 
background: #00FF00; 
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border: lpx solid #000099; 
height: 60px; 
width: 200px; 
margin:2px; 
float:left; 
} 
#div2 { 
background: #00FF00; 
border: lpx solid #000099; 
height: 60px; 
width: 200px; 
margin:2px; 
float:left; 
} 
--> 
</style> 
</head> 
<body> 
<div id="div1"> 这 是 divl 向 左 浮动 </div> 
<div id="div2"> 这 是 div2 向 左 浮动 </div> 
</body> 
</html> 


显示 效果 如 图 5-33 所 示 ,可 以 看 到 当 同 时 对 divl 和 div2 应 用 向 左 浮动 后 ,divl 向 左 
浮动 ,div2 紧 跟 其 后 ,两 个 div 占用 一 行 , 在 一 行 中 并 列 显示 。 


当 应 用 float 向 左 浮动 属性 - Wicrosoft Internet Explorer 
文件 中 ”编辑 玉 ) 查看 WD 收 荐 QQ) 工具 CY) 帮助 0D 


@ 扣 -日 国 国 的 有 Pr 闪 Wex @ 全 - 避 回 - 


ee [ii 


5-33 应 用 float 向 左 浮动 属性 的 实例 效果 


【实例 5-8】 应 用 float 向 右 浮动 属性 实例 。 


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional .dtd"> 
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<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 应 用 float 向 右 浮动 属性 </title> 
<style type= "text/css"> 
二 
#divl { 
background: #00FF00; 
border: lpx solid #000099; 
height: 60px; 
width: 200px; 
margin:2px; 
float: right; 
} 
#div2 { 
background: #00FF00; 
border: lpx solid #000099; 
height: 60px; 
width: 200px; 
margin:2px; 
float: right; 
} 
--> 
</style> 
</head> 
<body> 
<div id="div1"> 这 是 divl 向 右 浮动 </div> 
<div id="div2"> 这 是 div2 向 右 浮动 </div> 
</body> 
</html> 


显示 效果 如 图 5-34 所 示 , 可 以 看 到 当 同 时 对 divl 和 div2 应 用 向 右 浮 动 属性 后 ,两 个 
div 占用 一 行 ,在 一 行 中 并 列 显示 ,但 需要 注意 的 是 div2 在 divl 的 左边 。 


2. position 定位 


position 属性 与 float 属性 类 似 , 也 是 CSS 布局 中 非常 重要 的 概念 ,position 从 字面 
意思 上 看 就 是 指定 块 的 位 置 , 即 块 相 对 于 其 父 块 的 位 置 和 相对 于 自身 所 处 的 位 置 。 

position 属性 一 共有 4 个 值 ,分 别 为 static( 静 态 的 ) ,absolute( 绝 对 的 ) ,relative( 相 对 
的 ) 和 fixed( 固 定 的 ) 。 

1) 静态 定位 : static 

static 为 position 属性 的 默认 值 , 它 表 示 块 保持 在 原本 应 该 在 的 位 置 上 , 即 该 值 没有 
任何 移动 的 效果 。 
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当 应 用 float 向 右 汉 动 属 性 - 了 icrosoft Internet Explorer 
文件 到 ) ” 蝙 辑 到) 查看 Q) 收 疗 G) 工具 C) 和 助 0D 


Me Ri ih de 


5-34 应 用 float 向 右 浮动 属性 的 实例 效果 图 


2) 绝对 定位 : absolute 
一 个 对 象 如 果 设 置 了 position:absolute, 它 将 从 本 质 上 与 其 他 对 象 分 离 出 来 , 它 的 定 
位 模式 不 会 影响 其 他 对 象 , 也 不 会 被 其 他 对 象 的 浮动 定位 所 影响 ,从 某 种 意义 上 来 说 ,使 
用 了 绝对 定位 之 后 ,对 象 就 像 一 个 图 层 一 样 浮动 在 网 页 之 上 。 
【实例 5-9】 绝对 定位 应 用 实例 。 


< !DOCTYPE html PUBLIC "~-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional .dtd"> 
<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 绝 对 定位 应 用 实例 < /title> 

<style type= "text/css"> 

3 

bodyt{ 

margin:10px; 

font- family:Arial; 

font- size:13px; 

} 

#father{ 

background- color: #FF9966; 

border:1lpx dashed #000000; 

padding:10px; 

width:100%; 

height:100%; 

} 

#block{ 

background-color:#fff0ac; 
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border:1lpx dashed #000000; 

padding:10px; 

position:absolute; /* absolute 绝 对 定位 * / 
left:20px; /* 块 的 左边 框 离 页 面 左边 界 20px* / 
top:40px; /x* 块 的 上 边框 离 页 面 上 边界 40px*/ 
} 

--> 

</style> 

</head> 

<body> 

<div id="father"> 

<div id="block"> 绝 对 定位 应 用 实例 < /div> 
</div> 

</body> 

</html> 


显示 效果 如 图 5-35 所 示 , 可 以 看 到 当 子 块 的 position 属性 值 设 置 为 absolute 时 , 子 
块 已 经 不 再 从 属 父 块 father, 其 左边 框 相对 页 面 二 body 之 左边 的 距离 为 20px, 这 个 距离 
已 经 不 是 相对 父 块 左边 框 的 距离 了 , 子 块 的 上 边框 相对 页 面 二 body 之 上 边 的 距离 为 
40px, 这 个 距离 也 不 是 相对 于 父 块 上 边 的 距离 了 。 
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文件 双 ) 编辑 GE) 查看 Q) 收 疗 人 ) 工具 C) 帮助 0D 
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5-35 绝对 定位 应 用 实例 效果 图 


3) 相对 定位 : relative 

当 position 的 属性 值 设 置 为 relative 时 , 子 块 是 相对 于 其 父 块 来 进行 定位 的 ,需要 配 
合 top、right、bottom 和 left 这 4 个 属性 来 使 用 。 

【实例 5-10】 相对 定位 应 用 实例 。 


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional .dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 
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<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 相 对 定位 应 用 实例 < /title> 

<style type= "text/css"> 

用 生 二 这 

body{ 

margin:10px; 

font- family:Arial; 

font- size:13px; 

} 

#father{ 

background- color:#a0c8ff; 

border:1lpx dashed #000000; 

width:100%; height:100%; 

padding:Spx; 

} 

#blockt{ 

background-color:#fff0ac; 

border:1px dashed #000000; 
padding:10px; 

position:relative; /* relative 相对 定位 * / 
left:15px; /* 子 块 的 左边 框 距离 它 原来 的 位 置 15px* / 
top:10%; 

} 

--> 

</style> 

</head> 

<body> 

<div id="father"> 

<div id="block"> 相 对 定位 应 用 实例 < /div> 
</div> 

</body> 

</html> 


显示 效果 如 图 5-36 所 示 ,设置 了 子 块 的 position 属性 为 relative, 可 以 看 到 子 块 的 左 
边框 相对 于 其 父 块 左边 框 的 距离 为 15px, 上 边框 相对 于 其 父 块 上 边框 的 距离 为 10%。 

4) 固定 定位 : fixed 

将 块 的 position 属性 值 设 置 为 fixed 时 ,本 质 上 与 将 其 设置 为 absolute 一 样 ,只 不 过 
块 不 会 随 着 浏览 器 的 滚动 条 向 上 或 者 向 下 移动 。IE 7 与 IE 6 都 不 支持 fixed 属性 ,因此 
不 推荐 使 用 该 属性 值 。 


3. Z-index 空间 位 置 


Zindex 属性 用 于 调整 定位 时 重 和 至 块 的 上 下 位 置 ,与 它 的 名 称 一 样 , 想 象 页 面 为 X-Y 
轴 , 垂 直 于 页 面 的 方向 为 Z 轴 ,Z-index 值 大 的 页 面 位 于 其 值 小 的 页 面 的 上 方 。 
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相对 定位 应 用 实例 


5-36 ”相对 定位 应 用 实例 效果 图 


Zindex 属性 的 值 为 整数 ,可 以 是 正 数 也 可 以 是 负数 。 当 块 被 设置 了 position 属性 
时 ,该 值 便 可 设置 各 块 之 间 的 重 释 高 低 关系 。 默 认 的 Z-index 值 为 0, 当 两 个 块 的 值 一 样 
时 ,将 保持 原来 的 高 低 覆盖 关系 。 

【实例 5-11】 Z-index 空间 位 置 应 用 实例 。 


<!DOCTYPE html PUBLIC "-//W3C/V/DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Z-index 空间 位 置 应 用 实例 </title> 

<style type= "text/css"> 

芝 间 二 王 

bodyt{ 

margin:10px; 

font- family:Arial; 

font- size:13px; 

} 

#blockl{ 

background-color:#fff0ac; 

border:1lpx dashed #000000; 

padding:10px; 

position:absolute; 

left:20px; 

top:30px; 

z-index:1; /* 高 低 值 1x*/ 
} 

#block2{ 
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background- color:#ffc24c; 
border:1lpx dashed #000000; 
padding:10px; 
position:absolute; 

left:40px; 

top:50px; 

z-index:0; /* 高 低 值 0* / 
} 

#block3{ 

background- color:#c7ff9d; 
border:1px dashed #000000; 
padding:10px; 
position:absolute; 

left:60px; 

top:70px; 

z-index:-1; /* 高 低 值 -1*/ 
} 

--> 

</style> 

</head> 

<body> 

<div id="blockl">blockl< /div> 
<div id="block2">block2< /div> 
<div id="block3">block3< /div> 
</body> 

</html> 


显示 效果 如 图 5-37 所 示 , 当 设置 blockl 的 z-index 为 1,block2 的 z-index 为 0， 


block3 的 z-index 为 一 1 时 ,可 以 看 到 子 块 blockl 位 于 最 上 层 , 子 块 block2 位 于 中 间 层 ， 
而 子 块 block 3 位 于 最 下 层 。 
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5.6.4 布局 流程 


CSS 布局 是 一 种 很 新 的 网 页 布局 理念 ,完全 有 别 于 传统 的 布局 习惯 。 它 首先 将 页 面 
在 整体 上 进行 过 div 之 标记 的 分 块 ,然后 对 各 个 块 进行 定位 ,最 后 再 在 各 个 块 中 添加 相应 
的 内 容 。 通 过 CSS 进行 网 页 布局 ,修改 更 新 变 得 十 分 容易 。 


1. 页 面 用 DIV 分 块 


在 利用 CSS 布局 页 面 时 ,首先 要 有 一 个 整体 的 规划 ,包括 整个 页 面 分 成 哪些 模块 ,各 
个 模块 之 间 的 上 下 左右 关系 。 如 图 5-38 所 示 的 就 是 一 种 最 常用 的 布局 ,页 面 由 banner、 
主体 内 容 (content)、 菜 单 导航 (links) 和 页 脚 (footer) 几 个 部 分 组 成 ,各 个 部 分 分 别 用 自己 
的 ID 来 标识 。 


#container 


图 5-38 页 面 内 容 框架 图 


页 面 中 的 所 有 div 块 都 属于 块 # container ,一般 的 div 排版 都 会 在 最 外 面 加 上 这 样 
一 个 父 div, 便 于 对 页 面 的 整体 进行 调整 。 在 设计 网 页 时 ,首先 应 该 明确 整个 页 面 的 组 
成 ,并 且 在 HTML 中 搭建 好 框架 ,然后 才 是 布局 以 及 各 个 细节 的 设计 。 上 图 所 示 页 面 中 
的 HTML 框架 代码 如 下 所 示 。 


<div id="container">container 
<div id="bannner">banner</div> 
<div id="content">content</div> 
<div id="links">links</div> 
<div id="footer">footer< /div> 


</div> 


2. 排列 各 块 的 位 置 


当 页 面 内 容 已 经 确定 后 ,就 需要 根据 内 容 本 身 考虑 整体 的 页 面 版 型 ,常用 的 有 单 栏 、 
双 栏 或 左 中 右 栏 等 。 例 如 考虑 到 导航 条 的 易 用 性 ,可 以 使 用 双 栏 模式 ,如 图 5-39 所 示 。 
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#container 


#links 


图 5-39 双 栏 页 面 框架 


3. 用 CSS 精确 定位 各 块 


布局 好 页 面 的 框架 后 便 可 以 利用 CSS 对 各 个 块 进行 精确 定位 ,实现 对 页 面 的 整体 规 
划 ,然后 再 往 各 个 模块 中 添加 需要 的 内 容 。 
(1) 首先 对 body 标记 与 container 父 块 进行 设置 ,CSS 代码 如 下 所 示 : 


body { 
margin:10px; 
text-align: center; 

} 

#container { 
width:900px; 
background- color: #FFFFCC; 
border:lpx solid #000000; 
padding:10px; 

} 


(2) 设置 banner 板块 ,其 CSS 代码 如 下 所 示 : 


#banner { 
margin-bottom: Spx; 
padding:10px; 
background- color:#a2d9ff; 
border:1lpx solid #000000; 
text-align:center; 


} 


(3) 利用 float 属性 将 content 移动 到 页 面 左 侧 ,links 移动 到 页 面 右 侧 ,这 里 分 别 设 
置 了 这 两 个 板块 的 高 度 和 宽度 ,用 户 可 以 根据 设计 需求 进行 调整 ,其 CSS 代码 如 下 所 示 : 


#content { 
float:left; 
width:580px; 
height:300px; 
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background- color: #FFCCCC; 
border:1lpx solid #000000; 
text-align:center; 

} 

#1inks { 
float:right; 
width:300px; 
height:300px; 
background- color:#99FFFF; 
border:1lpx solid #000000; 
text-align:center; 


} 


(4) 由 于 content 和 links 对 象 都 设置 了 浮动 属性 ,因此 footer 需要 设置 clear 属性 ， 
使 其 不 受 浮动 的 影响 ,其 CSS 代码 如 下 所 示 。 


#footer { 
clear:both; 
padding:10px; 
background- color:#FF9999; 
border:1px solid #000000; 


text-align:center; 


5.6.5 常用 的 布局 类 型 


CSS+DIV 是 目前 最 流行 的 一 种 网 页 布局 格式 ,以 前 常用 表格 来 布局 ,而 现在 一 些 比 
较 知 名 的 网 页 设计 全 部 采用 CSS 十 DIV 来 排版 布局 。CSS 十 DIV 的 好 处 是 可 以 使 
HTML 代码 更 整齐 ,更 容易 使 人 理解 ,而 且 在 浏览 时 速度 也 比 浏览 传统 布局 方式 的 速度 
要 快 ,最 重要 的 是 它 的 可 控制 性 要 比 表格 强 得 多 :下面 介 绍 几 种 常用 的 布局 类 型 ,用户 在 
实际 设计 过 程 中 ,应 该 根据 需求 进行 必要 的 组 合 。 


1. 一 列 固定 宽度 布局 


一 列 固定 宽度 是 所 有 布局 的 基础 :也 是 最 简单 的 布局 形式 。 一 列 固定 宽度 中 ,宽度 
的 属性 值 是 固定 像素 。 
【实例 5-12】 一 列 固定 宽度 布局 应 用 实例 。 


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 一 列 固定 宽度 布局 应 用 实例 < /title> 
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<style type= "text/css"> 
eS 

#1layout{ 

background- color: #CCCCCC; 
border:5px solid #333333; 
width:600px; 

height:500px; 

} 

--> 

</style> 

</head> 

<body> 

<div id="layout"> 一 列 固定 宽度 < /div> 
</body> 

</html> 


在 浏览 器 中 浏览 ,由 于 是 固定 宽度 ,所 以 无 论 怎样 改变 浏览 器 窗口 大 小 ,div 的 宽度 
都 是 不 变 的 ,如 图 5-40 和 图 5-41 所 示 。 
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图 5-40 浏览 器 窗口 变 小 效果 


2. 一 列 自 适应 宽度 布局 


自 适应 布局 是 在 网 页 设计 中 比较 常见 的 一 种 布局 形式 , 自 适应 的 布局 能 够 根据 浏览 
器 窗口 的 大 小 ,自动 改变 其 宽度 值 ,是 一 种 非常 灵活 的 布局 形式 , 自 适应 布局 需要 使 用 百 
分 比 的 方式 表示 。 

【实例 5-13】 一 列 宽度 自 适应 布局 应 用 实例 。 


< !DOCTYPE html PUBLIC "~-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional.dtd"> 
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图 5-41 浏览 器 窗口 变 大 效果 


<html xmlns= "http://www.w3.0rg/1999/xhtml"> 
<head> 

<meta http-equiv= "Content-Type" content="text/html; charset=gb2312" /> 
<title> 一 列 宽度 自 适应 布局 应 用 实例 < /title> 
<style type= "text/css"> 

注 汪 二 

#1layout{ 

background-color: #CCCCCC; 

border:5px solid #333333; 

width:60%; 

height:300px; 

} 

--> 

</style> 

</head> 

<body> 

<div id="layout"> 一 列 自 适应 宽度 布局 </div> 
</body> 

</html> 


从 浏览 效果 中 可 以 看 到 ,div 的 宽度 自动 变 为 浏览 器 窗口 宽度 的 60% , 当 扩大 或 缩小 
浏览 器 窗口 时 ,其 宽度 将 维持 在 浏览 器 当前 宽度 比例 的 60% ,如 图 5-42 和 图 5-43 所 示 。 


3. 两 列 固定 宽度 布局 


两 列 的 布局 需要 用 到 两 个 div ,分别 用 left 和 right 表示 两 个 div 的 名 称 。 首 先 为 它 
们 设置 宽度 ,然后 让 两 个 div 在 水 平 线 中 并 排 显 示 , 从 而 形成 两 列 式 布局 。 
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图 5-42 浏览 器 窗口 变 小 效果 
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图 5-43 浏览 器 窗口 变 大 效果 


【实例 5-14】 两 列 固定 宽度 布局 应 用 实例 。 


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional .dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 两 列 固定 宽度 布局 应 用 实例 < /title> 
<style type= "text/css"> 
过 村 
#1left{ 
background- color:#EBDD9E; 
border:2px solid #B5A068; 
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width:300px; 
height:300px; 
float:left; 
} 
#right{ 
background- color:#CCCCCC; 
border:2px solid #B5A068; 
width:300px; 
height:300px; 
float:left; 
} 
--> 
</style> 
</head> 
<body> 
<div id="left">left</div> 
<div id="right">right</div> 
</body> 
</html> 


浏览 器 显示 效果 如 图 5-44 所 示 。 


图 5-44 两 列 固定 宽度 布局 效果 


4. 两 列 自 适应 宽度 布局 


两 列 自 适应 宽度 主要 实现 了 左右 两 栏 宽 度 的 自动 适应 ,通过 百分比 值 进行 设 定 。 
【实例 5-15】 两 列 自 适应 宽度 布局 应 用 实例 。 


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 


org/TR/xhtml1/DTD/xhtmll- transitional.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
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<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 两 列 宽度 自 适应 布局 应 用 实例 < /title> 
<style type= "text/css"> 
党 是 过 过 
#1left{ 
background- color:#EBDD9E; 
border:2px solid #B5A068; 
width:20%; 
height:300px; 
float:left; 
} 
#right{ 
background- color:#EBDD9E; 
border:2px solid #B5A068; 
width:70%; 
height:300px; 
float:left; 
} 
--> 
</style> 
</head> 
<body> 
<div id="left">left</div> 
<div id="right">right</div> 
</body> 
</html> 


如 图 5-45 和 图 5-46 所 示 , 从 浏览 效果 可 以 看 到 ,将 左 栏 设置 为 20%% , 右 栏 设置 为 
70%。 无 论 怎 样 改变 浏览 器 窗口 的 大 小 ,左右 两 栏 的 宽度 与 浏览 器 窗口 宽度 的 百分比 都 
不 改变 。 


5. 三 列 浮动 且 中 间 列 宽度 自 适 应 布局 


三 列 浮动 且 中 间 列 宽度 自 适应 布局 效果 要 求 左 栏 固 定 宽度 ,并 居 左 显示 , 右 栏 要 求 
固定 宽度 并 居 右 显示 ,而 中 间 列 在 左 栏 和 右 栏 的 中 间 , 根 据 左右 栏 的 间距 变化 自动 适应 
其 宽度 。 

【实例 5-16】 三 列 浮 动 且 中 间 列 宽度 自 适应 布局 应 用 实例 。 


< !DOCTYPE html PUBLIC "~-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/Vxhtml1/DTD/Vxhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 三 列 浮动 中 间 列 宽度 自 适 应 布局 应 用 实例 < /title> 


<style type= "text/css"> 
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ET 
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图 5-46 浏览 器 窗口 变 大 效果 


这 站 se 

body{ 
margin:0px; 

} 

#1left{ 
background- color:#EBDD9E; 
border:2px solid #B5A068; 
width:100px; 
height:300px; 
position:absolute; 
top :0Px7 
left:0px; 

} 


#centert{ 
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background- color:#EBDD9E; 
border:2px solid #B5A068; 
height:300px; 
margin- left:100px; 
margin- right:100px; 
} 
#right{ 
background- color:#EBDD9E; 
border:2px solid #B5A068; 
width:100px; 
height:300px; 
position:absolute; 
right :Opx; 
top:Opx; 
} 
--> 
</style> 
</head> 
<body> 
<div id="left">left</div> 
<div id="center">center</div> 
<div id="right">right< /div> 
</body> 
</html> 


如 图 5-47 和 图 5-48 所 示 , 从 浏览 效果 中 可 以 看 到 ,无 论 怎 样 改变 浏览 器 窗口 的 大 小 ， 
左右 两 栏 的 宽度 固定 不 变 , 而 中 间 栏 的 宽度 则 根据 浏览 器 窗口 宽度 的 大 小 自 适应 其 宽度 。 


下 三 列 浮动 中 间 列 宽度 自 适应 布局 应 用 实例 - Wicros 
文件 @) 编辑 EE) 查看 WW) 收藏 A) 工具 (DD) 帮助 0 


Oa. © 国 国 0 Pr tnx @ 


图 5-47 浏览 器 窗口 变 小 效果 
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文件 下) 编 辑 于 ) 查看 收 蔬 由 ) 工具 上 ) 帮助 中 


ae- 0 国 国 镶 记 昧 广 tmx 加 全 -部 


图 5-48 浏览 器 窗口 变 大 效果 


5.7 使 用 CSS 美化 “北京 奥运 吉祥 物 一 一 和 福娃 ”网 咎 


5.7.1 网 站 概述 


“北京 奥运 吉祥 物 一 一 福娃 ”网 站 是 一 个 非 营 利 性 的 主题 宣传 网 站 , 它 以 北京 奥运 吉 
祥 物 一 一 福娃 为 主题 ,展示 了 福娃 的 形象 ,讲述 了 福娃 的 含义 ,设计 灵感 产生 历程 以 及 
与 福娃 相关 的 新 闻 , 旨 在 推广 北京 奥运 会 、 推 广 福娃 文化 ,使 全 世界 人 民 了 解 福娃 ,关注 
北京 奥运 会 ,以 此 向 全 世界 人 民 推 广博 大 精深 的 中 国文 化 。 


5.7.2 布局 分 析 


Go 4 章 的 学 习 , 已 经 在 Dreamweaver 中 主要 采用 表格 布局 的 方式 开发 出 “北京 
吉祥 物 一 一 福娃 ”网 站 的 主要 页 面 ,其 主页 如 图 5-49 所 示 。 该 网 站 包括 福娃 简介 、 感 

aa 
统计 、 奥 运 官网 等 栏目 。 网 站 以 深 红色 为 主 色 调 , 象 征 着 吉祥 喜庆 。 网 站 中 大 量 使 用 了 
奥运 会 相关 图 标 ,使 主题 鲜明 突出 ,要 点 明确 。 

接 下 来 ,将 应 用 CSS 十 DIV 布局 的 形式 重新 设计 本 网 站 的 主页 ,其 他 的 页 面 的 设计 
类 似 于 主页 的 设计 。 

本 网 站 主页 的 内 容 很 多 ,通过 分 析 主 要 包括 # header 对 象 、# content 对 象 和 上 # 
footer 对 象 三 部 分 。 

并 head 对 象 是 网 页 的 头 部 ,包括 网 页 logo 和 导航 栏 nav。 

划 content 对 象 是 网 页 的 主体 ,包括 图 片 新 闻 # imagesnews、 新 闻 动 态 # news、 公 告 
栏 半 notice\ 福 娃 简介 # fwjj、 福 娃 揭秘 # movize、 精 彩 图 片 . list、 名 人 说 福娃 . list 以 及 投 
票 调查 # vote 等 栏目 。 
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图 5-49 网 站 主页 


#footer 对 象 是 网 页 的 底部 。 
通过 以 上 分 析 ,主页 的 布局 架构 如 图 5-50 所 示 。 


图 5-50 主页 布局 架构 


福娃 ”网 站 163 
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5.7.3 各 模块 布局 设计 


分 析 完 页 面 的 布局 构架 后 ,就 可 以 在 Dreamweaver 中 利用 CSS 对 各 个 板块 进行 设 
计 定 位 ,实现 对 页 面 的 整体 规划 。 

首先 通过 前 面 所 学 的 知识 在 Dreamweaver 中 建立 一 个 名 称 为 fuwacss” 的 站 点 , 然 
后 在 站 点 中 建立 一 个 首页 index. html 文件 .一 个 css 文件 夹 一 个 images 文件 夹 。 


1. 页 面 总 体 布局 设计 


可 以 通过 选择 “插入 记录 ”一 “布局 对 象 *>>“div 标签 ”命令 的 方法 进行 布局 ,也 可 以 
通过 在 “代码 ”视图 中 直接 编写 源 代码 的 方法 进行 布局 ,布局 页 面 的 HTML 框架 的 代码 
如 下 所 示 : 


<div id="header"> 此 处 显示 id 为 header 的 内 容 
<div id="wrapleftlogo"> 此 处 显示 id 为 wrapleftlogo 的 内 容 
<div id="leftlogo"> 此 处 显示 id 为 leftlogo 的 内 容 < /div> 
</div> 
<div id="centerlogo"> 此 处 显示 id 为 centerlogo 的 内 容 
<div id="flashlogo"> 此 处 显示 id 为 flashlog 的 内 容 < /div> 
</div> 
<div id="wraprightlogo"> 此 处 显示 id 为 wraprightlogo 的 内 容 
<div id="rightlogo"> 此 处 显示 id 为 rightlogo 的 内 容 </div> 
</div> 
<div id="nav"> 此 处 显示 id 为 nav 的 内 容 </div> 
<div id="navbg"> 此 处 显示 id 为 navbg 的 内 容 < /div> 
</div> 
<div id="content"> 此 处 显示 id 为 content 的 内 容 
<div id="maincon"> 此 处 显示 id 为 maincon 的 内 容 
<div id="firstmain"> 此 处 显示 id 为 firstmain 的 内 容 
<div id="imagesnews"> 此 处 显示 id 为 imagesnews 的 内 容 </div> 
<div id= "news"> 此 处 显示 id 为 news 的 内 容 < /div> 
<div id= "banner"> 此 处 显示 id 为 banner 的 内 容 </div> 
<div id= "notice"> 此 处 显示 id 为 notice 的 内 容 </div> 
</div> 
<div id="secondmain"> 此 处 显示 id 为 secondmain 的 内 容 
<div id="fwjj"> 此 处 显示 id 为 fwjj 的 内 容 < /div> 
<div id="movize"> 此 处 显示 id 为 movize 的 内 容 </div> 
</div> 
<div id="thirdmain"> 此 处 显示 id 为 thirdmain 的 内 容 
<div class="thirdmain list"> 此 处 显示 class 为 thirdmain 1ist 的 内 容 </div> 
<div class="thirdmain list"> 此 处 显示 class 为 thirdmain 1ist 的 内 容 </div> 
<div id="vote"> 此 处 显示 id 为 vote 的 内 容 < /div> 


</div> 
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</div> 
</div> 
<div id="footer"> 此 处 显示 id 为 footer 的 内 容 < /div> 


在 Dreamweaver“ 设 计 ” 视 图 中 的 显示 效果 如 图 5-51 所 示 。 


到 A jx vj8l4 x 5v ZK/1 物 


图 5-51 页 面 总 体 布局 


2. 链接 页 面 的 CSS 文件 


(1) 在 css 文件 夹 中 新 建 一 个 名 为 style. css 的 文件 。 
(2) 打开 “CSS 样式 ”面板 , 单 击 “ 附 加 样式 表 ” 按 钮 国 | 链 接 style. css 文件 ,代码 
如 下 : 


<link href="css/style.css" rel="stylesheet" type="text/css" /> 


3. 设计 页 面 的 通用 规则 


一 般 情况 下 ,需要 在 CSS 的 开始 部 分 定义 页 面 的 通用 规则 。 通 用 规则 对 所 有 的 标记 
都 起 作用 ,这 样 就 可 以 声明 绝 大 部 分 标记 都 会 涉及 的 属性 ,具体 操作 步骤 如 下 : 

(1) 打开 “CSS 样式 ?面板 ,双击 打开 style. css 文件 , 单 击 “ 新 建 CSS 规则 ?按钮 是 ， 
弹出 “新 建 CSS 规则 ”对 话 框 ,在 “标签 "下 拉 列 表 框 中 输入 通配符 ”x* ”, 选 择 “ 仅 对 该 文 
档 ”, 如 图 5-52 所 示 。 

(2) 单 击 “ 确 定 ” 按 钮 ,弹出 * x 的 CSS 规则 定义 ”对 话 框 ,在 对 话 框 的 “分 类 ”列表 框 
中 选择 “ 方 框 ” 选 项 ,在 “填充 ”和 “边界 ”中 设置 上 、 下 、 左 、 右 的 填充 和 边界 都 为 0, 如 图 5-53 
所 示 。 

(3) 用 相同 的 方法 设置 body 标签 的 字体 和 大 小 。 设 置 完 成 后 ,CSS 代码 如 下 所 示 : 


So 使 用 CSS 美化 “北京 奥运 吉祥 物 福娃 ”网 站 


痢 建 CSS 规则 


赤 择 器 类 和 型- 〇 类 可 应 用 于 任何 标签) EC) 
名 标签 重新 定义 特定 标签 的 外 观 ) () 
口 高 级 ( ID、 伪 类 过 择 器 等 ) Q) 


标签 : |* 


定义 在 ; 〇 | 新建 样式 表 文 件 ) 
回 公 对 访 文档 


国 [EGD 3| 汪 动 中 加 
加 ET 回 
边界 

回 全 部 相同 GE) 回 全 部 相同 他) 

辣 几 co) 国 上 o: 癌 “ 国 全 和 oo 
| 像素 xx) 右 @: 0 ”S| 
加 [5 下 :| S| 
CE 左 中 :0 ”名 | 计 6 


5-53 设置 * 的 填充 和 边界 


x* {margin:0; padding:0;} 
body{ font- family:" 宋 体 "; font-size:14px;} 


4. 设计 header 对 象 部 分 
网 页 的 #header 部 分 包括 网 页 的 logo# logo 和 导航 并 nav。 


(1) 网 页 的 logo 部 分 是 一 个 中 间 栏 固定 ,左右 栏 自 适应 的 结构 ,并 且 在 # flashlogo 


中 插入 了 透明 flash 动画 。 其 CSS 代码 如 下 所 示 : 


#header { 
margin:0 auto; 
width:100%; 
height:184px; 
background:#e40502; 
} 
#wrapleftlogo, #leftlogo, #centerlogo, #wraprightlogo, #rightlogo { 
height:130px; 
} 
#wrapleftlogo { 
margin- left:- 476px; 
float:left; 
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width:50%; 
} 
#1leftlogo { 
margin- left:476px; 
background:url(../images/logo left.gif) right no- repeat; 
} 
#centerlogo { 
margin:0 auto; 
width:950px; 
background:url(../images/logo center.jpg); 
float:left; 
position:relative; 
} 
#flashlogo { 
position:absolute; 
right :22px; 
top:2px; 
width: 216px; 
height: 109px; 
} 
#wraprightlogo { 
margin- left:- 476px; 
float:left; 
width:50%; 
} 
#rightlogo { 
margin- left:476px; 
background:url(../images/logo right .gif) left no- repeat; 
} 


在 浏览 器 中 的 显示 效果 如 图 5-54 所 示 。 
(2) 导航 区 域 由 # nav 和 并 navbg 两 个 区 块 组 成 ,使 用 了 CSS 中 的 链接 属性 。 其 
CSS 代码 如 下 所 示 : 


#nav { 
width:100%; 
height:35px; 
line-height:35px; 
text-align:center; 
background:#333333; 
float:left; 
Color:#FFFFFF; 

} 

#nava{ 


margin:0 8px; 
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5-54 ”网 页 logo 效果 图 


#nav a:link { 
text-decoration:none; 
Color:#FFFFFF; 

} 

#nav a:visited { 
text-decoration:none; 
COolor:#FFFFFF; 

} 

#nav a:hover { 
text-decoration:none; 
Color:#FF6600; 
font-weight:bolder; 

} 

#navbg { 
width:100%; 
height:19px; 
background:url(../images/daohangbg2.gif); 
float:left; 

} 


在 浏览 器 中 的 显示 效果 如 图 5-55 所 示 。 
5. 设计 上 content 对 象 部 分 


通过 分 析 网 页 布局 构架 图 可 以 知道 ,#content 分 为 三 列 ,其 


# maincon 为 中 间 列 ， 


宽度 固定 ,左右 两 列 没有 内 容 因此 不 需要 考虑 ,而 并 maincon 主体 显示 部 分 分 为 三 行 ,分 


别 显示 网 页 的 不 同 区 域 。 


(1) 第 一 行车 firstmain 又 分 为 图 片 新 闻 区 # imagesnews、 新 闻 区 并 news、# banner 


区 和 公告 栏 站 notice, 其 CSS 代码 如 下 所 示 : 
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#content { 
width:100%; 

} 

#maincon { 
width:952px; 
margin:0 auto; 

} 

#firstmain { 
width:952; 
height:280px; 

} 

#imagesnews { 
width:345px; 
height:280px; 
float:left; 

} 

#news { 
width:330px; 
height:280px; 
float:left; 
margin:0 10px; 

} 

#news img { 
width:325px; 
height:34px; 

} 

-neirong { 


margin:10px 0 0 10px; 
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line-height:1.5; 
} 
#banner { 
width:256px; 
height:63px; 
background- image:url(../images/banner .gif); 


float:left; 


} 

#notice { 
width:256px; 
height:207px; 
margin:1l0px 000; 
float:left; 
background:#f£0f0f0; 

} 


#notice P { 
text-align:center; 
margin:8px 0; 
font-weight:bold; 

} 

#notice hr { 
width:90%; 
border:none; 
margin:auto; 
border- top:2px dashed 

, 

.ggnr { 
margin:15px 10px 0 10px; 
line-height:1.5; 

} 

#notice a:link { 
width:90%; 
text-decoration:none; 
color:#000000; 

} 

#notice a:visited { 
width:90%; 
text-decoration:none; 
color:#000000; 

} 

#notice a:hover { 


width:90%; 
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text-decoration:none; 
color:#000000; 
} 


在 浏览 器 中 的 显示 效果 如 图 5-56 所 示 。 
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(2) 第 二 行 # secondmain 区 分 为 福娃 简介 # fwijj 和 福娃 揭秘 # movize, 其 CSS 代码 
如 下 所 示 : 


#secondmain { 
width:952px; 
height:225px; 
margin:10px auto; 

} 

#fwjj { 
width:681px; 
height:225px; 
float:left; 
border- style:solid; 
border-width:0 lpx lpx lpx; 
border- color:#389de3; 

} 

.fwjj content { 
width:112px; 
height:180px; 
margin:9px; 
float:left; 


text-align:center; 
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font-size:12px; 
font-weight:bold; 

} 

.fwjj_content img { 
border:solid lpx #389de3; 
margin:0 0 10px 0; 

} 

.fwjj content a:link { 
text-decoration:none; 
color:#000000; 

} 

.fwjj_ content a:visited { 
text-decoration:none; 
color:#000000; 

} 

.fwjj_content a:hover { 
text-decoration:none; 
color:#000000; 

} 

#movize { 
width:256px; 
height:225px; 
float:right; 
background:#f£0f0f0; 

} 

#movize p { 
text-align:center; 
margin:8px 0; 
font-weight:bold; 

} 

#movize hr { 
width:90%; 
border:none; 
margin:auto; 
border- top:2px dashed 

} 

"list dt { 
padding:15px 15px 0 20px; 

} 

.list dd { 
float:left; 
padding- left :5px; 
height:23px; 
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line-height:23px; 

} 

.list a:link { 
text-decoration:none; 
color:#000000; 

} 

.list a:visited { 
text-decoration:none; 
color:#000000; 

} 

.list a:hover { 
text-decoration:none; 
color:#000000; 

} 


在 浏览 器 中 的 显示 效果 如 图 5-57 所 示 。 
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图 5-57 网 页 #secondmain 效果 图 


(3) 第 三 行 #thirdmain 区 分 为 精彩 图 片 . thirdmain_list 和 名 人 说 福娃 . thirdmain_ 
list 和 投票 调查 # vote, 其 CSS 代码 如 下 所 示 : 


.thirdmain list { 
width:336px; 
height:286px; 
margin:0 10px 0 0; 
float:left; 
border- style:solid; 
border-width:0 lpx lpx 1px; 
border- color:#389de3; 


So 使 用 css 美化 “北京 奥运 吉祥 物 


福娃 


网 站 
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} 

#vote { 
width:256px; 
height:286px; 
background:#f£0f0f0; 
float:right; 

} 

#vote P { 
text-align:center; 
margin:8px 0; 
font-weight:bold; 

} 

#vote hr { 
width:90%; 
border:none; 
margin:auto; 
border- top:2px dashed #666666; 

} 

#votelpf{ 
position:relative; 
top:15px; 
left:S5px; 
text-align:left; 
font-weight:normal; 

} 

.votecolor { 
Color:#FF0000; 
height:23px; 
line-height:23px; 

} 


在 浏览 器 中 的 显示 效果 如 图 5-58 所 示 。 
6. 设计 footer 对 象 部 分 


网 页 页 脚 # footer 的 结构 比较 简单 ,其 CSS 代码 如 下 所 示 : 


#footert{ 

background- image:url(../images/banquan.gif); 
clear:both; 

margin:0 auto; 

width:952px; 

height:148px; 

} 


174 站 开发 5 网 页 设计 


EET TT 


Bu. 日 国 国 蚊 记 开 去 mr 人 @ 会- 各 加 - 口 四 和 外国 0 四 


“网上 市 要 村 + 但 开店 内 让 
“北京 证 上 丙 肖 宣 伟 训 “ 天 性 ” 知 右 产 仅 
大 囊 有 要 科 避 生 入 所 所 上 不 月 上 市 


E79 
二 】 坟 曾 | 由 下 | CH [1 
ed 
1 声 而 】 三 | C881 可 
名 C9 6 
ya se 办 FI 而 
1 | 而】 人: 光 | [R81 08] 
Ean mua a ue ER 
| -RE 图片 L222 [| E> 
“图 广 , 北 训 运 寺 术 怕 和 汉人 到 并 “北京 an 丢 汪 天守 塘 家 关 运 。。 
“国文 ， 效 京 去 区 人物 各 沈 市民 类 = 妈 运 : 下 大名 亲信 生 这 全 中 国电 人 人 


mW 天 Ee ee 
“* 国 也 天 委 全 襄 基 ，08 呈 运 火炬 入 甬 浪 步 方 守 弄 © « NB 
© a 互动 9 兹 
Ow is 
Ow Ma 


加 


县 示 忆 fosra 国 由宇 


5-58 ”网 页 thirdmain 效果 


.banquant{ 
position:relative; 
top:35px; 


text-align:center;} 
在 浏览 器 中 的 显示 效果 如 图 5-59 所 示 。 
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图 5-59 网 页 #footer 效果 图 


至 此 ,主页 的 整个 布局 设计 完成 ,如 图 5-60 所 示 。 其 他 页 面 的 设计 与 其 类 似 ,在 此 不 
再 歼 述 。 


5-60 ”主页 整体 效果 


5.8 本 章 小 结 


CSS 是 Cascading Style Sheet 的 缩写 , 即 “ 层 释 样 式 表 ”, 是 用 于 控制 网 页 样式 并 允许 


将 样式 信息 与 网 页 内 容 分 离 的 一 种 标记 性 语言 。 它 以 HTML 为 基础 ,提供 了 丰富 的 格 
式 化 功能 ,如 字体 .颜色 .背景 ,整体 排版 等 。 

本 章 介绍 了 三 个 方面 的 内 容 : 其 一 , CSS 的 概念 和 特点 ,在 网 页 中 使 用 CSS 的 四 种 
方式 以 及 选择 器 的 语法 格式 及 三 类 选择 器 : 标签 选择 器 、 类 选择 器 和 ID 选择 器 ;其 二 ， 
CSS 的 创建 和 管理 方式 ,CSS 中 的 常用 属性 .应 用 CSS 十 DIV 进行 页 面 布局 的 DIV 标记 、 
SPAN 标记 、 盒 子 模型 .元 素 的 定位 方式 、 布 局 流程 和 常用 的 布局 类 型 ; 其 三 ,应 用 CSS 十 
DIV 对 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 主页 重新 进行 了 设计 的 过 程 。 


5.9 马 题 
一 、 填 空 是 
1. CSS 是 英文 的 缩写 , 即 “ 层 释 样式 表 ” 的 意思 ,是 用 于 的 一 种 标 
记性 语言 。 
2. 在 网 页 中 使 用 CSS 有 4 种 方法 , 即 、 、 和 
3. 在 CSS 中 ,有 三 类 选择 器 ,分 别 是 和 


二 、 简 答 及 实 训 题 


参照 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 CSS 的 应 用 ,承接 4.6 习题 中 简 答 及 实 训 题 第 
1 小 题 设计 的 网 站 静态 页 面 ,应 用 CSS 布局 和 美化 此 网 站 。 
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使 用 Photoshop 闫 化 “ 北 系 奥运 
吉祥 物 一 一 福娃 ”网 站 


6.1 Photoshop CS3 项 


Adobe Photoshop CS3 是 Adobe 公司 推出 的 一 款 图 形 图 像 处 理 软件 , 它 横 跨 平面 与 
网 页 多 媒体 的 设计 领域 ,是 一 种 全 球 标准 的 图 像 编 辑 解 决 方案 。 它 是 设计 、 制 作 、 美 化 和 
维护 网 站 过 程 中 不 可 或 缺 的 工具 。 它 主要 用 于 处 理 图 片 文件 ,为 用 户 提供 了 丰富 和 便捷 
的 图 形 图 像 处 理 功 能 ,使 用 户 不 用 动笔 ,只 通过 操作 计算 机 就 能 制作 出 色彩 丰富 .样式 多 
变 的 网 页 图 片 ,因此 深 受 广大 网 页 设计 者 的 青睐 。 


6.1.1 Photoshop CS3 的 工作 界面 


Photoshop CS3 的 工作 界面 相对 于 之 前 的 版 本 有 了 很 大 的 改变 , 它 的 工作 界面 更 加 
科学 ,更 易于 操作 ,其 工作 界面 如 图 6-1 所 示 。 
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6-1 Photoshop CS3 的 工作 界面 


Os 使 用 Photoshop 美化 “北京 奥运 吉祥 物 福娃 ”网 站 


1. 标题 栏 


标题 栏 的 左边 显示 Photoshop CS3 软件 的 图 标 和 名 称 ,右边 是 “最 小 化 "“ 最 大 化 / 
还 原 ” 和 “关闭 ”程序 窗口 的 控制 按钮 。 


2. 菜单 栏 


菜单 栏 包括 "文件 " “编辑 "“ 图 像 ”"“ 图 层 " “选择 ”“ 滤 镜 ” “分析 ”、“ 视 图 ”、“ 窗 
口 " 和 “帮助 ”10 个 主 菜 单 。 每 一 个 主 菜单 下 面 都 有 相应 的 菜单 命令 ,这 些 命令 可 以 协助 
工具 完成 对 图 像 的 编辑 。 

另外 ,在 菜单 名 称 的 后 面 都 带 有 快捷 方式 命令 ,便于 使 用 键盘 快捷 操作 。 


3. 工具 属性 栏 


工具 属性 栏 位 于 菜单 栏 的 下 方 ,在 工具 栏 中 选取 不 同 的 工具 时 ,工具 属性 栏 中 显示 
的 内 容 和 参数 也 各 不 相同 。 

使 用 工具 属性 栏 都 有 一 个 基本 的 操作 顺序 : 先 在 工具 栏 中 选取 要 使 用 的 工具 ,然后 
根据 需要 在 该 工具 属性 栏 中 进行 参数 的 调整 .最 后 使 用 该 工具 对 图 像 进行 编辑 和 修改 。 
当然 也 可 以 使 用 系统 默认 的 参数 对 图 像 进行 编辑 和 修改 。 

在 "窗口 "菜单 中 ,选择 “选项 "命令 ,可 控 。 cea 


a IA W 

制 工 具 必 性 栏 的 显示 或 隐藏 。 加 7 * 
[2 人 片 记 笃 工具 

4 工具 栏 [= 

出 FieWAIA o 

工具 栏 是 Photoshop 工作 界面 的 重要 组 | 2 A 吕 

成 部 分 ,如 图 6-2 所 示 。 工 具 栏 的 上 部 为 SamzR | 
22 个 工具 组 ,其 中 共 包含 了 60 个 工具 。 下 部 。 区 时 2 开 | 二 2 ee 
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5. 图 像 窗口 Mm NA 

es FREIR 1 

图 像 窗口 主要 是 显示 所 编辑 的 图 像 。 在 smeza 0 
“文件 "菜单 中 ,选择 “打开 ”命令 ,可 以 打开 一 ee A 
个 或 同时 打开 多 个 图 像 窗口 。 图 6-2 Photoshop CS3 的 工具 栏 


每 个 窗口 上 方 都 有 标题 栏 , 标 题 栏 左边 
显示 图 像 文 件 的 名 称 , 右 边 是 “最 小 化 “最 大 化 /还 原 ” 和 “关闭 ”图 像 窗 口 的 控制 按钮 。 


6. 图 像 状态 栏 
图 像 状态 栏 位 于 图 像 窗口 的 最 底部 .用 于 显示 图 像 处 理 时 的 基本 信息 , 它 由 两 部 分 
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组 成 ,其 中 左 侧 区 域 用 于 图 像 窗口 的 显示 比例 ,用 户 也 可 在 该 窗口 中 输入 数值 后 , 按 
Enter 键 来 改变 显示 比例 , 右 侧 区 域 用 于 显示 图 像 文 件 信息 。 


7. 面板 组 合 栏 


Photoshop CS3 为 用 户 提供 了 19 种 控制 面板 ,其 中 最 常用 的 控制 面板 是 “图 层 ” 控 制 
面板 “通道 "控制 面板 和 路径” 控制 面板 ,使 用 这 些 控 制 面板 可 以 对 图 层 、 通 道路 径 及 
色彩 进行 相关 的 设置 和 控制 ,使 Photoshop CS3 处 理 图 像 更 为 方便 、 快 捷 。 

用 户 若 要 选择 某 个 控制 面板 ,可 单 击 面板 组 合 栏 中 相应 的 标签 。 若 要 隐藏 某 控制 面 
板 窗口 ,可 单 击 "窗口 ?菜单 中 带 “/ ”标记 的 命令 ,或 单 击 面板 窗口 右上 角 “ 关 闭 ” 按 钮 , 若 
要 重新 显示 隐藏 的 面板 ,可 单 击 “ 窗 口 "菜单 中 不 带 “V ”标记 的 命令 。 


6.1.2 Photoshop CS3 的 基本 操作 


1. 图 像 文 件 的 基本 操作 

1) 新 建 图 像 文 件 

选择 菜单 栏 中 "文件 ”一 "新建 命令 ,弹出 如 图 6-3 所 示 的 “新 建 ”对 话 框 窗口 ,从 中 可 
以 设置 新 图 像 的 相关 属性 。 


名 称 (N); 
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图 6-3 “新 建 " 对 话 框 


在 此 对 话 框 中 名称” 选项 用 于 设置 文件 名 称 。 单 击 * 预 设 " 右 侧 的 小 三 角 按钮 ,在 
下 拉 列 表 中 列举 了 许多 自 带 的 文件 尺寸 供用 户 选 择 ,通常 情况 下 选择 “ 自 定义 ”选项 ,之 
后 可 以 在 “宽度 ”和 “高 度 ” 选 项 中 分 别 设置 想 要 的 数值 ,计量 单位 可 选择 “厘米 ”或 “ 像 
素 ”。“ 分 辩 率 ”选项 用 于 控制 图 像 文件 的 品质 ,数值 越 大 ,图 像 品 质 越 高 。“ 颜 色 模 式 ” 用 
于 设置 文件 的 色彩 属性 ,默认 状态 下 为 RGB 模式 。“ 背 景 内 容 " 用 于 设置 图 像 的 背景 颜 
色 , 可 根据 需要 选择 。 

用 户 设 置 完成 后 , 单 击 “ 确 定 ” 按 钮 即 可 新 建 一 个 图 像 文件 。 

2) 保存 图 像 文 件 

选择 菜单 栏 中 “文件 ”一 “存储 "或 者 “文件 ”一 “存储 为 ”命令 , 则 弹出 如 图 6-4 所 示 的 


wy 


“存储 为 "对话 框 。 


huaduo jpe 
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回 使 用 小 写 扩展 名 


图 6-4 “存储 为 "对 话 框 
在 “保存 在 ”列表 中 可 以 选择 文件 存储 的 目录 ,在 “文件 名 ”列表 中 输入 文件 名 称 , 在 
“文件 格式 ”下拉 列表 中 选择 一 种 文件 存储 格式 (在 网 页 相关 的 图 像 文 件 中 ,其 格式 一 般 
为 ~JPG” 格 式 ) ,设置 完成 后 , 单 击 “保存 "按钮 , 即 可 将 文件 保存 。 
3) 关闭 图 像 文 件 


选择 菜单 栏 中 “文件 "一" 关闭 "命令 , 即 六、 和 
可 关闭 图 像 文 件 。 如 果 当 前 文件 已 被 编辑 但 TDNBackup 我 的 六 档 \,Ahuaduojpg 的 更 59m? 
没有 保存 ,会 弹出 如 图 6-5 所 示 的 Adobe CE Cay 
Photsshop CS3 Extended 信息 提示 框 ,提示 图 6-5 Adobe Photoshop CS3 Extended 


用 户 关闭 图 像 文件 之 前 ,是 否 保存 图 像 文件 。 信息 提示 杠 
4) 打开 图 像 文件 
选择 菜单 栏 中 “文件 ”打开 ” 命 令 , 则 弹出 “打开 ”对 话 框 ,如 图 6-6 所 示 ,用户 选择 
相应 路 径 的 图 像 文件 即 可 打开 。 


2. 辅助 绘图 工具 的 使 用 


应 用 标尺 
eh 会 制图 像 时 ,通常 需要 精确 地 定位 图 像 .Photoshop CS3 提供 了 标尺 显 
示 功 能 ,单位 默认 为 厘米 ,用 户 可 以 通过 选择 菜单 栏 中 "视图 ”~ 标尺 ”命令 显示 和 隐藏 
标尺 。 
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图 6-6 “打开 ”对 话 框 


在 标尺 上 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 可 以 设置 标尺 的 单位 。 

例如 想 将 标尺 的 单位 设置 为 像素 , 则 具体 操作 步骤 如 下 : 

(1) 打开 图 片 文件 后 ,选择 菜单 栏 中 “视图 ”>“ 标 尺 ” 命 令 ,在 图 像 窗 口 的 边框 处 显示 
出 标尺 ,单位 默认 为 厘米 。 

(2) 在 标尺 处 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 “像素 "命令 ,如 图 6-7 所 示 ， 
标尺 的 单位 将 由 厘米 变 为 像素 。 


六 未 标题 -1 和 100% (图 层 1。 灰 色 /8) 


6-7 设置 标尺 单位 


2) 使 用 参考 线 
用 户 可 以 在 指定 的 位 置 建立 相应 的 参考 线 , 作 为 坐标 ,这 样 可 以 帮助 用 户 对 图 像 进 
行 精确 的 定位 ,也 可 用 于 辅助 网 页 布局 和 对 网 页 进行 切片 。 
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(1) 创建 参考 线 
将 鼠标 光标 置 于 窗口 上 部 的 标尺 上 , 按 住 鼠标 左 键 不 放 向 下 拖 放 到 合适 位 置 ,然后 
释放 鼠标 即 可 创建 一 条 水 平 参考 线 , 如 图 6-8 所 示 。 


未 标题 -1 @ 100% (图 层 1， 灰 色 /8) 


6-8 创建 水 平 参考 线 


将 鼠标 光标 置 于 窗口 左 侧 的 标尺 上 , 按 住 鼠标 左 键 不 放 向 右 拖 放 到 合适 位 置 ,然后 
释放 鼠标 即 可 创建 一 条 垂直 参考 线 ,如 图 6-9 所 示 。 


未 标题 -1 和 100% (图 层 1， 友 色 一 


图 6-9 创建 垂直 参考 线 


(2) 移动 参考 线 

选择 工具 栏 的 移动 工具 如 ,将 鼠标 光标 移动 到 参考 线 上 , 按 下 鼠标 左 键 并 将 其 拖 动 
到 所 需要 的 位 置 ,然后 再 释放 鼠标 即 可 实现 移动 参考 线 操作 。 

(3) 锁定 参考 线 

在 参考 线 比 较 多 时 ,可 能 会 出 现 误 操作 的 情况 ,因此 有 时 需要 固定 参考 线 的 位 置 ,使 
其 不 能 移动 ,选择 “视图 ”一 “锁定 参考 线 " 命 令 即 可 实现 此 操作 。 


(4) 隐藏 参考 线 

用 户 选 择 “ 视 图 ”一 “显示 ”一 “参考 线 " 命 令 即 可 实现 此 操作 。 

(5) 删除 参考 线 

使 用 移动 参考 线 的 方法 ,将 不 需要 的 参考 线 拖 出 图 像 窗口 之 外 ,可 以 删除 该 条 参 
考 线 。 


用 户 选 择 “ 视 图 ”>“ 清 除 参考 线 ” 命 令 , 可 以 删除 图 像 窗口 中 所 有 的 参考 线 。 
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3. 图 像 显 示 操 作 


1) 改变 图 像 的 显示 比例 

对 于 打开 的 图 像 文 件 , 可 以 进行 放大 或 缩小 ,特别 是 对 细节 的 修理 时 应 采用 放大 的 
方法 ,具体 操作 方法 如 下 : 

(1) 放大 视图 : 选择 工具 箱 中 的 缩放 工具 ,鼠标 变 为 加 号 , 单 击 要 放大 的 图 像 , 则 图 
像 按 比例 进行 放大 , 当 不 能 再 放大 时 ,和 鼠标 指针 中 心 变 为 空白 。 

(2) 缩小 视图 : 选择 工具 箱 中 的 缩放 工具 , 按 住 Alt 键 ,鼠标 变 为 减 号 , 单 击 要 缩小 
的 图 像 , 则 图 像 按 比例 进行 缩小 。 

(3) 选择 菜单 栏 上 的 “视图 ”一 “放大 ”命令 (快捷 键 Ctrl 十 十 ) 或 “视图 ”一 “缩小 ”命令 
(快捷 键 Ctrl 十 一 ) 也 可 以 完成 图 像 的 放大 和 缩小 。 

选择 菜单 栏 上 的 “视图 ”>“ 按 屏幕 大 小 缩放 ”命令 (快捷 键 Ctrl 十 0) ,可 以 将 文件 的 
大 小 调整 到 适合 屏幕 的 大 小 ,便于 从 整体 察看 图 像 的 效果 。 

(4) 选择 缩放 工具 ,在 图 像 中 画 出 矩形 的 区 域 , 则 选区 内 的 图 像 按 最 大 比例 在 窗口 中 
(5) 用 户 也 可 以 在 窗口 状态 栏 左 侧 输入 显示 百分比 
调节 图 像 显 示 比 例 。 

2) 调节 显示 区 域 

用 户 可 以 通过 “导航 器 "面板 来 调节 显示 区 域 ,如 
图 6-10 所 示 。 如 果 图 像 可 以 在 屏 中 全 部 显示 , 则 红 框 充 
满 整个 区 域 , 当 进 行 放大 操作 时 ,红色 方 框 中 的 内 容 即 图 
像 窗 口上 看 到 的 内 容 ,可 以 通过 光标 移动 红色 方 框 ,图 像 
窗口 即 显示 所 要 查看 的 内 容 。 图 6-10 “导航 器 "控制 面板 

当 图 像 无 法 在 图 像 窗口 满 屏 显 示 时 ,用 户 可 以 通过 
选择 “ 抓 手工 具 ”, 在 图 像 窗 口 按 住 左 键 将 需要 显示 的 图 像 部 分 显示 在 图 像 窗 口中 。 


4. 设置 前 景色 和 背景 色 


1) 运用 “ 拾 色 器 ”对 话 框 设 置 颜色 

前 景色 用 于 当前 绘图 工具 的 颜色 ,默认 为 黑色 ;背景 色 用 于 图 像 的 底 色 ,相当 于 画布 
本 身 的 颜色 ,默认 为 白色 。 

单 击 工具 栏 中 的 前 景色 或 背景 色色 块 ,打开 “ 拾 色 器 前 景色 ”对 话 框 ,如 图 6-11 所 示 。 
在 其 中 的 色 域 内 ,或 者 在 色 域 右 侧 的 颜色 条 上 单 击 ,选择 合适 的 颜色 ;也 可 以 在 代表 颜色 
模式 的 文本 框 内 输入 数值 ,然后 单 击 “ 确 定 ” 按 钮 设置 颜色 的 参数 。 同 时 ,工具 栏 中 的 前 
景色 或 背景 色色 块 也 将 发 生变 化 。 

值得 注意 的 是 ,如 果 设 计 网 页 图 像 , 则 需要 在 拾 色 器 对 话 框 中 选中 "只 有 Web 颜色 ” 
复 选 框 ,那么 拾 色 器 中 将 显示 Web 颜色 ,如 图 6-12 所 示 。 

2) 运用 颜色 面板 设置 颜色 

选择 菜单 栏 上 的 “窗口 ?一 颜色 ”命令 ,或 者 使 用 快捷 键 F6, 弹 出 “颜色 ”面板 ,如 
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拾 色 吉 (前 景色 ) 


口 区 有 Web 颜 名 


6-11 “ 拾 色 器 (前 景色 ) 对话 杠 


拾 色 器 (前 景色 ) 


四 区 有 Web 颜 多 


图 6-12 “ 拾 色 器 (前 景色 ) "对话 框 中 选择 "只 有 Web 颜色 ” 


图 6-13 所 示 ,可 以 在 "颜色 ?面板 中 设置 前 景色 和 背景 色 。 

3) 运用 “ 色 板 ”面板 设置 颜色 

选择 菜单 栏 上 的 “窗口 >>“ 色 板 ”命令 ,弹出 “ 色 板 ”面板 ,如 图 6-14 所 示 , 用 户 可 以 在 
“ 色 板 "面板 中 设置 前 景色 和 背景 色 。 


图 6-13 “颜色 ”面板 图 6-14 “ 色 板 "面板 
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4) 运用 吸管 工具 获取 颜色 

利用 吸管 工具 须 , 可 以 在 图 像 或 调 板 中 吸取 颜色 。 选 择 工具 箱 中 的 吸管 工具 ,在 图 
像 中 的 某 一 位 置 单 击 , 则 吸管 下 的 颜色 变 为 前 景色 ;如 果 在 图 像 上 单 击 的 同时 按 住 Alt 
键 , 则 吸管 下 的 颜色 变 为 背景 色 。 


5. 撤销 和 恢复 操作 


在 处 理 图 像 的 过 程 中 ,难免 出 现 操作 失误 的 情况 ,如 果 能 够 使 用 撤销 或 者 恢复 操作 
将 图 像 效 果 恢 复 到 想 要 的 状态 ,对 于 用 户 来 说 是 非常 实用 的 功能 。 

Photoshop 中 常见 的 撤销 和 恢复 操作 主要 包括 以 下 两 种 方式 : 

1) 利用 编辑 菜单 撤销 或 者 恢复 操作 

选择 菜单 栏 中 “编辑 ”>“ 还 原状 态 更 改 ” 命 令 , 或 者 使 用 
快捷 键 Ctrl 十 Z, 撤 销 或 者 恢复 一 次 操作 。 选 择 菜单 栏 中 “ 编 
辑 ”>“ 后 退 一 步 ” 命 令 , 或 者 使 用 快捷 键 Ctrl 十 Alt 十 Z, 可 以 
撤销 多 次 操作 。 选 择 菜 单 栏 中 “编辑 ”一 “前 进一步 ”命令 ,或 
者 使 用 快捷 键 Ctrl 十 Shift 十 Z, 可 以 恢复 多 次 操作 。 

2) 利用 历史 记录 面板 撤销 或 者 恢复 任意 操作 

选择 菜单 栏 中 “窗口 >“ 历史 记录 ”命令 .或 者 单 击 面板 
组 合 中 的 历史 记录 按钮 如 ,在 弹出 的 “历史 记录 ”面板 中 ,如 
图 6-15 所 示 , 用 户 可 以 撤销 或 者 恢复 任意 操作 。 图 6-15 “历史 记录 ”面板 

需要 提醒 的 是 : Photoshop CS3 通过 “历史 记录 ”功能 记 
录 之 前 的 操作 ,默认 的 历史 记录 状态 为 20, 即 可 以 恢复 之 前 的 20 次 操作 。 当 然 可 以 自 定 
义 历史 记录 状态 ,选择 菜单 栏 中 "编辑 ”首选 项 -性 能 ”命令 ,在 弹出 的 “首选 项 对 
话 框 中 设置 历史 记录 状态 ,如 图 6-16 所 示 。 


性 中 

内 存 使 用 情况 历史 记录 与 高 玉楼 存 
可 用 内 存 :1691 MB 

历史 记 好 关 才 td) | 四国 | EYE 


理想 范围 : 930-1217 MB 直人 (C); | 于 一 
让 Photoshop 合用 (L} [530 | MB (55%) 


参考 钱 、 网 格 、 切 片 和 计数 
增 效 工具 
文字 


回 局 用 30 加 汪 (E) 


上 病史 记录 调 板 中 所 能 保存 的 历史 记录 的 景 大 数量 , 
存 妃 别 ; 图 像 数 据 的 高 速 返 存 锯 3 数量 。 用 于 提高 屏幕 重 纤 和 直方 图 于 度 。 寺 择 的 | 
2 选 兰 的 高 速 姐 让 级 9 莽 少 则 品质 越 高 . os | 


6-16 ”设置 历史 记录 状态 
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6.2 下 计 网 页 前 的 准备 工作 


在 网 页 设计 过 程 中 ,收集 到 的 一 些 原始 素材 往往 不 能 直接 使 用 ,都 需要 做 进一步 的 加 
工 处 理 , 因 此 素材 的 加 工 处理 显 得 非常 重要 。 充 分 利用 Photoshop CS3 强大 的 图 像 处 理 功 
能 可 以 进行 网 页 页 面 效 果 图 的 设计 和 网 页 中 各 种 图 片 素材 的 制作 、 编 辑 以 及 美化 等 工作 。 


6.2.1 确定 页 面 大 小 


网 页 页 面 尺寸 与 显示 器 的 大 小 及 分 辩 率 密切 相关 ,显示 器 的 分 辩 率 也 由 以 前 的 
800 关 600 像素 .1024X768 像素 发 展 为 如 今 的 1280 X 800 像素 以 上 ,甚至 高 达 1920X 
1080 像素 。 

另外 ,由 于 浏览 器 本 身 也 将 占用 一 部 分 空间 (如 边框 ,标题 栏 .菜单 栏 .工具 栏 . 地 址 
栏 和 状态 栏 等 ) ,因此 实际 网 页 的 页 面 大 小 比 目 前 主流 的 分 辩 率 的 长 和 宽 各 少 20 个 像素 
为 佳 , 例 如 1004X748、1260X780、1420X880 等 。 

本 章 实例 仍 以 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 页 面 1260X 800 像素 为 例 进 行 讲 
解 和 叙述 。 


6.2.2 ”确定 网 页 主 色 调 


网 页 的 主 色调 是 树立 网 站 形象 的 关键 因素 ,设计 一 个 优秀 的 网 站 首先 需要 确定 网 站 
的 主体 色调 。 

“北京 奥运 吉祥 物 一 一 福娃 ”网 站 主要 以 奥运 五 环 标志 的 颜色 , 即 红 色 、 蓝 色 、 黄 色 、 
绿色 以 及 黑色 为 主体 ,内 容 丰 富 、 色 彩 炫 丽 ,充分 体现 了 奥运 会 的 精神 。 


6.2.3 设计 网 页 的 结构 


网 页 的 结构 是 通过 网 站 规划 书 中 网 页 的 功能 模块 来 划分 的 ,如 图 6-17 所 示 的 就 是 
“北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 主页 草图 。 


Logo 区 
网 站 导航 区 
网 站 banner 
图 片 新 闻 区 福娃 动态 
公告 栏 
福娃 简介 (图 片 ) 福娃 揭秘 


精彩 图 片 名 人 说 福娃 | 投票 调查 


版 权 区 


6-17 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 主页 草图 
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6.3 被 入 美化 网 页 


6.3.1 Logo 区 设计 


Logo 是 网 站 的 标志 和 门户 ,是 网 站 形象 的 重要 体现 ,也 是 网 站 的 名 片 。 对 于 一 个 追 
求 精美 的 网 站 ,Logo 更 是 它 的 灵魂 所 在 , 即 所 谓 的 "点 睛 ?之 处 。Logo 区 设计 步骤 如 下 : 


1. 新 建 图 像 文件 


打开 Photoshop CS3 ,选择 "文件 ”一 “新 建 ”命令 (快捷 键 Ctrl 十 N) ,弹出 如 图 6-18 所 
示 的 “新 建 ” 对 话 框 窗口 。 创 建 名 称 为 fuwa, 宽 X 高 为 1260X 1300 像素 ,分 辩 率 为 
102 像素 /英寸 ,颜色 模式 为 RGB 颜色 ,背景 内 容 为 白色 的 图 像 文件 。 


2. 设置 Logo 区 背景 


(1) 选择 菜单 栏 中 “窗口 >“ 图 层 " 命 令 显 示 图 层面 板 , 然 后 单 击 面板 组 合 栏 中 图 层 
面板 下 方 的 “创建 新 图 层 ” 按 钮 图, 新 建 一 个 图 层 , 并 且 命 名 为 “Logo 背景 "(在 图 层 名 称 
区 域 双击 就 可 以 对 图 层 进行 重 命名 ) ,如 图 6-19 所 示 。 


名 称 () 
预 设 (): | 自 定 


大 小 (了 


删除 预 设 (人 ;) 


Device Central(E)... 


图 6-18 新 建 图 像 文件 图 6-19 新建 图 层 


(2) 选择 “视图 ”一 “标尺 ”命令 (快捷 键 Ctrl 十 R) 显 示 标 尺 ,修改 显示 单位 为 像素 ,并 
且 在 130 像素 处 创建 一 条 水 平 参考 线 , 在 155 像素 处 和 1105 像素 处 各 创建 一 条 垂直 参 

(3) 打开 素材 Logobeijing. jpg 文件 ,在 工具 栏 中 选择 “移动 工具 ”, 选 中 素材 文件 , 按 
住 鼠 标 左 键 ,把 图 片 拖 到 fuwa 窗口 “Logo 背景 ”图 层 的 左上 角 ,如 图 6-20 所 示 。 

(4) 在 图 层面 板 中 复制 “Logo 背景 "图 层 ( 通 过 图 层面 板 右 上 角 的 菜单 命令 可 以 实现 
此 操作 ) ,在 “Logo 背景 副本 ”图 层 上 ,选择 “编辑 ”一 “变换 ”一 “水 平 翻 转 ” 命 令 ,然后 将 素 
材 移 至 右上 方 , 如 图 6-21 所 示 。 


™ Adobe Photos! d — [fF (Le 
国文 人) 编 避 EE) 图 入 区 图 层 山 过 择 G) 活 镜 I) 分 析 由 ”视图 吧 窗口 中 帮助 0 
ES 


# 
EF 
也 


PE 


上 
会 际 像素 


2 


上 
la 
日 


加 ET 


6-21 水 平 翻转 素材 


3. 设置 网 站 Logo 


(1) 新 建 “Logo 图 标 背 景 ? 图 层 ,在 工具 栏 中 选择 * 圆 角 和 矩形 工具 (CU)”, 设 置 前 景色 
为 #FFFFFF, 并 在 工具 属性 栏 中 将 半径 设 为 8px' 在 图 层 上 画 一 个 圆 角 矩形 ,调整 适当 
的 位 置 和 大 小 ,如 图 6-22 所 示 。 

(2) 打开 素材 ayhh. jpg 文件 ,在 工具 栏 中 选择 “移动 工具 ”, 选 中 素材 按 住 鼠 标 左 键 ， 
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6-22 设置 Logo 图 标 背 景 


把 图 片 拖 到 fuwa 文档 中 。 在 图 层面 板 中 ,将 新 图 层 命名 为 “奥运 会 徽 ”, 选 择 “ 编 辑 ” 一 
“自由 变换 ”命令 (快捷 键 Ctrl 十 T) ,调整 奥运 会 徽 的 大 小 , 放 在 Logo 图 标 背 景 中 的 左边 ， 
如 图 6-23 所 示 。 


图 6-23 放置 奥运 会 徽 


(3) 打开 素材 fuwa. jpg 文件 ,在 工具 栏 中 选择 “移动 工具 ”, 选 中 素材 按 住 鼠 标 左 键 ， 
把 图 片 拖 到 fuwa 文档 中 ,在 图 层面 板 中 ,将 新 图 层 命 名 为 “福娃 图 标 ”, 选择 “编辑 ”>“ 自 
由 变换 ”命令 (快捷 键 Ctrl 十 T) ,调整 福娃 图 标的 大 小 , 放 在 Logo 图 标 背 景 中 的 右边 ,如 
图 6-24 所 示 。 


全 = 使 用 Photoshop 美化 “北京 奥运 吉祥 物 福娃 ”网 站 


189 


P Adobe Photoshop CS3 Extended 一 3. 3% ( 祷 妊 周 标 , 6)] 

"EE TT 

区 WE 口 雹 所有 窑 P [于 
两 fo 村 


6-24 放置 福娃 图 标 


(4) 新 建 “分 割 线 ” 图 层 , 设 置 前 景色 为 # FF0000, 在 工具 栏 中 选择 “直线 工具 (U)”， 
在 奥运 会 徽 和 福娃 图 标 之 间 画 一 条 红色 的 垂直 线条 ,如 图 6-25 所 示 。 


二 。 国 口 2 未 过 # | 机 3 卫 色相 立 肋 知 村 | 审 


各 


图 6-25 设置 分 割 线 


4. 设置 网 站 名 称 


(1) 在 工具 栏 中 选择 “ 横 排 文字 工具 (T)”, 输 入 “2008 北京 奥运 会 吉祥 物 一 一 福娃 ”， 
在 工具 属性 栏 中 设置 字体 为 “方正 综艺 简体 ”, 字 号 为 “26 点 ”, 消 除 锯齿 为 “无 ”>。 设 置 字 
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体 图 层 样式 ,设置 样式 为 “投影 ”, 如 图 6-26 所 示 。 

(2) 在 工具 栏 中 选择 “ 横 排 文字 工具 ”, 输 入 *THE MASCOTS OF THE BEIJING 
OLYMPIC GAMES 一 FUWA”, 在 工具 属性 栏 中 设置 字体 为 Arial ,字号 为 “16 点 ”, 消除 
锯齿 为 “无 ”。 选 择 * 窗 口 ?字符 ”命令 ,在 弹出 的 字符 控制 面板 中 设置 “水 平 缩放 ”为 
75% ,如 图 6-27 所 示 。 设 置 字体 图 层 样式 .设置 样式 为 “投影 ,如 图 6-28 所 示 。 


广 结构 
福全 模式 ;| 正片 亚 让 加 | | 款 
不 通明 度 (0); 一 一 一 一 全 [es| |% 可 
Arial 圈 |Reouar 国 
age 人 ) 区 Ee 三 [上 国 和 要 [Ew 国 
距离 (0); 器 一 一 一 一 一 |3 | 像素 IT lio% 下 |sw 
扩展 QU 人 一 一 一 一 一 一 
Se 一 : a A | 
GC EE 较 
se 多 上 点 颜色 : 
“at [4] Dns 国 r MRTT Te 
EH lw 美国 英语 图 [到 国 
回 图 必 控 宝 投影 凯 一 一 一 一 一 一 一 
图 6-26 设置 图 层 样 式 图 6-27 “字符 ”控制 面板 


(3) 网 站 Logo 区 的 右 侧 是 透明 Flash 动画 ,在 此 不 做 讲解 ,此 操作 可 以 在 Dreamweaver 
中 直接 实现 。 

至 此 ,网 站 Logo 区 的 设计 完成 。 接 下 来 需要 整理 图 层 ,在 图 层 控制 面板 中 , 单 击 创 
建新 组 按钮 厦 创 建 "Logo 区 ?组 ,选择 Logo 区 所 使 用 的 图 层 , 将 其 拖 动 放 人 Logo 区 组 
中 ,如 图 6-29 所 示 。 


| ES 
姬 定 : 回 帮 中国 。 若 元 ;|100% » 
加 a 
所 
夯 
一 投影 
a 画 
温 合 模式 : | 正片 查 底 [| 局 
不 通明 度 (0); 一 一 一 分 一 国 ”|% 
DE 度 加 使 用 全 局 Yt(G) 
虐 训 (0): 吕 一 一 一 一 已 ] 和 来 厚 
扩展 Bj): 站 一 一 一 一 一 |0 |% 
大 NS: 吕 一 一 一 一 [5] 江 案 太 
a 届 
sa [A DGS 局 
杂 色 一 |% Lia 
回 图 属 皖 宝 投影 
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Os 使 用 Photoshop 美化 “北京 奥运 吉祥 物 
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(4) Logo 区 最 终 效果 图 如 图 6-30 所 示 。 


会 吉祥 物 三 往 寻 


TINO OLYWPIC CAWES ST OWA 


6-30 ”Logo 区 效果 图 


6.3.2 导航 区 设计 


网 站 导航 是 指 通过 一 定 的 技术 手段 ,为 网 站 的 访问 者 提供 一 定 的 途径 ,使 其 可 以 方 
便 地 访问 到 所 需要 的 内 容 。 本 实例 网 站 导航 区 设计 步骤 如 下 : 

(1) 在 167 像素 处 创建 一 条 水 平 参 考 线 ,并 且 新 建 “导航 区 背景 "图 层 , 如 图 6-31 
所 示 。 


图 6-31 新 建 导航 区 背景 图 层 


(2) 设置 前 景色 为 #333333, 选 择 工具 栏 中 的 “和 矩形 选 框 工具 ”, 在 导航 区 背景 图 层 上 
勾画 导航 选区 ,使 用 “油漆 桶 工具 ”在 选区 中 填充 前 景色 ,或 者 使 用 快捷 键 Alt 十 Del 填充 
前 景色 ,如 图 6-32 所 示 。 

(3) 在 工具 栏 中 选择 “ 横 排 文字 工具 ” .输入 “网 站 首页 | 福娃 简介 | 福娃 揭秘 | 福娃 动 
态 | 福 娃 运 动 造 型 | 历届 奥运 会 吉祥 物 | 福娃 感言 | 奥运 官网 ”, 在 工具 属性 栏 中 设置 字体 
为 “宋体 ”, 字 号 为 *13 点 ”, 消 除 锯齿 为 “无 ,以 垂直 参考 线 为 参考 调整 各 导航 栏目 的 间距 
和 位 置 , 如 图 6-33 所 示 。 

(4) 在 185 像素 处 创建 一 条 水 平 参考 线 ,并 且 新 建 “导航 区 背景 2? 图 层 , 选 择 工 具 栏 
中 的 “渐变 工具 ”, 在 工具 属性 栏 中 ,选择 线性 渐变 : 单 击 渐变 编辑 按钮 ,弹出 “渐变 编辑 
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cs 一 [fuvapsd @ 33.3% (导航 区 到 最 ，RGB/16)] 
EECTIEEIIEEIEIIEEIT 
EE 口语 商 民 示 口 WW1 有 [3 


福寿 揭 密 “| 福娃 动 ..。 芭 右 | 医 


A- Ed | 口 调 共 口 大 小 岂 滑 了 习 旺 示 口 和 的 所 有 宣 
oy oo -出 一 


图 6-33 设置 导航 区 栏目 


器 "对 话 框 ,设置 渐变 效果 如 图 6-34 所 示 。 

(5) 选择 工具 栏 中 的 "矩形 选 框 工 具 ”, 在 导航 区 背景 图 层 上 勾画 导航 区 背景 2 选区 ， 
使 用 “渐变 工具 ”从 上 到 下 进行 垂直 线性 渐变 。 

(6) 此 时 ,网 站 导航 区 设计 完成 ,在 图 层 控制 面板 创建 “导航 区 ”组 ,将 所 使 用 的 图 层 
放 入 导航 区 组 中 ,如 图 6-35 所 示 。 
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#FFFFFF 


: % [出 除 (D) | 


100 ]% [BRD) | 
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ed — [fuvwa.psd @ 33,3%(RGB/16)] 
所 择 仿 ) 泥 镇 分析 凡 视图 由) 窗口 @) 帮助 0 
以 满 屏 显 示 口 沪 放 所 有 窗 [LiESR 再 ] [打印 RR 二] 
9 00 00 oo, peoo oo oo0 [iio Jiz00 [300 下 人 


上 
马 


6-35 ”设置 导航 区 组 


6.3.3 图 片 新 闻 区 设计 


在 设计 图 片 新 闻 区 之 前 ,用 户 首先 应 该 考虑 图 片 新 闻 区 、 福 娃 动态 区 和 公告 栏 区 所 
占 页 面 的 比例 ,在 此 使 用 了 参考 线 作为 标准 进行 精确 定位 。 在 495 像素 .510 像素 、 
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835 像素 和 850 像素 处 分 别 创建 一 条 垂直 参考 线 ,在 435 像素 和 460 像素 处 分 别 创建 一 
条 水 平 参 考 线 , 如 图 6-36 所 示 。 


图 6-36 设置 参考 线 


参考 线 设 置 完成 之 后 ,就 可 以 设计 图 片 新 闻 区 效果 图 了 ,具体 步骤 如 下 : 
(1) 新 建 * 图 片 新 闻 边 框图 层 , 在 工具 栏 中 选择 "矩形 选 框 工具 ”, 以 参考 线 为 标准 ， 


选取 图 片 新 闻 图 片 选区 。 在 菜单 栏 中 选择 "编辑 ”>“ 描 边 " 命 令 , 为 选区 设置 #333333 颜 
色 和 边框 。 


(2) 打开 fuwahdp.jpg 素 材 文件 ,使 用 "移动 工具 "将 图 片 素材 放置 在 图 片 新 闻 区 ,将 
新 图 层 命 名 为 “幻灯 片 ”, 并 且 选 择 “ 编 辑 ” 一 “自由 变换 ”命令 调整 图 片 大 小 和 位 置 。 

(3) 新 建 “ 图 片 标题 背景 "图 层 ,在 工具 栏 中 选择 “矩形 选 框 工具 ”, 以 参考 线 为 标准 ， 
选取 图 片 标题 选区 ,然后 选择 “编辑 ”一 “填充 ”命令 (快捷 键 Alt 十 Del) ,为 图 片 标题 选区 
填充 # d8d8d8 前 背景 颜色 ,如 图 6-37 所 示 。 

(4) 选择 “ 横 排 文字 工具 ”, 输 入 “2008 奥运 会 吉祥 物 揭晓 : 五 个 福娃 “北京 欢迎 
你 !"”, 调 整 大 小 及 位 置 ,在 图 层 控制 面板 ,建立 “图 片 新 闻 区 ?组 ,将 所 使 用 的 图 层 放置 到 


此 组 中 。 
(5) 此 时 就 完成 了 图 片 新 闻 区 的 设计 ,其 效果 如 图 6-38 所 示 。 


全 
2008 奥 运 会 吉祥 物 揭晓 : 五 个 福娃 “北京 欢迎 你 t+ ” 


图 6-38 图 片 新 闻 区 效果 图 


图 6-37 填充 新 闻 标题 选区 


Os 使 用 Photoshop 美化 “北京 奥运 吉祥 物 
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6.3.4 ”福娃 动态 区 设计 


福娃 动态 区 是 网 站 的 文字 新 闻 区 ,其 具体 设计 步骤 如 下 : 
(1) 在 215 像素 处 创建 一 条 水 平 参考 线 新建" 福娃 动态 标题 背景 "图 层 , 使 用 “和 拢 形 
选 框 工具 ”创建 福娃 动态 标题 背景 选区 ,使 用 快捷 键 Alt 十 Del 填充 #fofofo 前 景 颜色 ,如 


图 6-39 所 示 。 


图 6-39 设置 福娃 动态 标题 背景 


(2) 选择 工具 栏 中 的 “渐变 工具 ”, 在 工具 属性 栏 中 调 出 “渐变 编辑 器 ”, 以 Logo 区 背 


景 颜色 为 参考 ,使 用 “吸管 工具 ”从 左 到 右 依 
次 采集 相应 的 颜色 设置 渐变 样式 ,如 图 6-40 
所 示 ,设置 完成 后 ,存储 为 “渐变 辅助 线 ? 名 
称 的 渐变 样式 。 

(3) 新 建 “ 渐 变 辅助 线 "图 层 , 选 择 工具 
栏 中 的 “直线 工具 ”, 在 工具 属性 栏 中 设置 创 
建 路 径 按 钮 贵 . 粗 细 为 2px, 如 图 6-41 
所 示 。 

在 标题 背景 上 方 建立 路 径 , 选 择 菜单 中 
的 “窗口 ”>“ 路 径 ” 命 令 ,调用 出 路 径 控制 面 
板 , 单 击 “ 将 路 径 作为 选区 载 人 ”按钮 将 路 径 
转化 为 选区 ,如 图 6-42 所 示 。 

(4) 使 用 之 前 设置 的 “渐变 辅助 线 ” 样 
式 填充 此 选区 ,如 图 6-43 所 示 。 


淄 变 编辑 器 


国 4 | /a 
A PA | 


下 
一 色 标 


6-40 设置 渐变 样式 
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-| 昌国 日 | 和 分 国 加 9@ NN] 信 - a Ep ] 辕 吕 同和 


6-41 设置 直线 工具 属性 


(5) 新 建 “标题 文字 背景 "图 层 , 使 用 "矩形 选 框 工 具 ” 在 福娃 动态 标题 背景 区 左下 角 
创建 文字 背景 选区 ,选择 工具 栏 中 的 “渐变 工具 ”, 设 置 渐变 样式 ,如 图 6-44 所 示 ,为 文字 
背景 选区 设置 垂直 渐变 效果 ,如 图 6-45 所 示 。 


@ OLD 全 #d8d8d8 #d8d8d8 
图 6-42 “路 径 ” 面 板 #f8{f8f8 #f8f8f8 
图 6-43 ”渐变 选区 图 6-44 设置 标题 文字 背景 渐变 样式 


(6) 选择 “ 横 排 文字 工具 ”, 输 入 “福娃 动态 ]”, 设 置 字体 样式 为 宋体 ,字体 大 小 为 
14 点 ,字体 颜色 为 #000000, 消 除 锯齿 方法 为 “无 ”, 字 形 为 加 粗 , 如 图 6-46 所 示 。 

(7) 选择 “ 横 排 文字 工具 ”, 输 入 “更 多 二 二 ”, 设 置 字 体 样式 为 宋体 ,字体 大 小 为 
14 点 ,字体 颜色 为 #000000, 消 除 锯齿 方法 为 “无 ”。 

新 建 “ 下 拉线 ”图 层 ,使 用 “直线 工具 "勾画 一 条 黑色 下 拉线 .如 图 6-47 所 示 。 

(8) 新 建 “ 新 闻 动态 ”图 层 .使 用 “ 横 排 文字 工具 ”输入 一 组 新 闻 标 题 .完成 福娃 动态 区 
的 效果 设计 ,如 图 6-48 所 示 。 


[福娃 动态 ] 更 多 》> 


“北京 奥运 特许 商品 零售 店 店 址 。 履 时 销售 点 
“ 寺 祥 物 商业 魔力 大 双 怖 五 “福娃” 卖 疯 了 
6-45 ”标题 文字 背景 渐变 效果 “ 北京 奥运 吉祥 物 上 币 芝 一 天 销售 火爆 (外 图} 
.价格 从 8 元 到 十 几 万 ， 销售 有 望 夫 破 3 亿 美元 
“* 奥 姐 委 为 “水货 福娃 " 验 正身 并 非 假冒 商品 


[福娃 动态 ] * 福娃 组 合 : “北京 欢迎 您 ”还 是 “欢迎 你 ”? 
四 ， 从 1 个 到 5 个 用 京 疗 代 葵 龙 一 揭秘 奥运 吉祥 物 
6-46 输入 标题 ， 奥运 吉祥 物 诞生 记 。 北 京 2008 奥 运 会 大 事 记 


* 吉祥 物 受到 三 重 保护 。 热 门 方案 为 何 落选 ? 
一 一 一 “奥运 吉祥 物 省 生 记 “北京 2006 奥 运 会 大 事 记 
[福娃 动态 ] 更 多 >> “吉祥 物 受 到 三 重 保护 。 热 门 方案 为 何 落选 ? 


图 6-47 勾画 下 拉线 图 6-48 福娃 动态 区 效果 图 


02 使 用 Photoshop 美化 “北京 奥运 吉祥 物 福娃 ”网 站 


使 用 类 似 的 方法 建立 “福娃 动态 ?组 ,将 使 用 到 的 所 有 图 层 调整 到 福娃 动态 组 中 。 
6.3.5 Banner 和 公告 栏 区 的 设计 


1. 网 站 Banner 设计 


网 站 Banner( 网 络 图 像 广告 ) 是 以 . gif、. jpg 等 格式 的 图 像 文件 为 主 ,定位 在 网 页 中 ， 
用 来 表现 网 络 广 告 内 容 或 者 网 站 的 宣传 口号 。 

本 实例 中 的 Banner 就 是 宣传 奥运 精神 的 口号 ,具体 设计 步骤 如 下 : 

在 245 像素 处 创建 一 条 水 平 参 考 线 ,打开 banner. jpg 素材 文件 ,使 用 “移动 工具 
(V) "将 图 片 素材 放置 在 网 站 banner 区 ,将 图 层 命名 为 
banner, 并 选择 “编辑 ”一 “自由 变换 ”命令 调整 图 片 的 
大 小 及 位 置 ,其 效果 如 图 6-49 所 示 。 

在 图 层 控制 面板 中 建立 banner 组 ,整理 相关 图 层 。 图 6-49 网 站 Banner 区 效果 


2. 公告 栏 区 的 设计 


(1) 在 255 像素 处 创建 一 条 水 平 参考 线 ,新 建 “ 公 告 栏 背景 ”图 层 。 使 用 "矩形 选 框 工 
具 ” 建 立 公告 栏 背景 选区 ,使 用 “油漆 桶 工具 或 者 快捷 键 Alt 十 Del 填充 # fofofo 前 景 
颜色 。 

(2) 选择 “ 横 排 文 字 工 具 ”, 输 入 “公告 栏 ”, 设 置 字 体 样式 为 宋体 .字体 大 小 为 14 点 ， 
字体 颜色 为 # 000000 ,消除 锯齿 方法 为 “无 ”字形 为 加 粗 ; 输 入 NOTICE, 设 置 字体 样式 
为 宋体 ,字体 大 小 为 12 点 ,字体 颜色 为 #000000, 消 除 句 齿 方 法 为 “无 ”; 输 入 “更 多 二 二 ”， 
设置 字体 样式 为 宋体 ,字体 大 小 为 14 点 ,字体 颜色 为 #000000, 消 除 锯齿 方法 为 “无 ”, 调 
整 各 文字 到 适当 的 位 置 ,如 图 6-50 所 示 。 

(3) 新 建 “ 分 割 线 1” 图 层 , 使 用 “直线 工具 "在 公告 栏 下 方 建立 一 个 粗细 为 1px, 颜 色 
为 深 灰 色 (#918f8f) 的 直线 。 

新 建 “ 分 割 线 2" 图 层 ,使 用 "直线 工具 ?在 深 灰 色 分 割 线 下 方 建立 一 个 粗细 为 1px, 颜 
色 为 白色 (#1ffffff) 的 直线 。 

选择 “ 横 排 文字 工具 ”, 输 入 一 组 公告 栏 标题 。 

在 图 层 控制 面板 中 建立 “公告 栏 ” 组 ,将 相关 的 图 层 放置 到 公告 栏 组 中 ,完成 公告 栏 
区 的 设计 ,其 最 终 效 果 如 图 6-51 所 示 。 


公告 栏 RDTICE 更 多 >> 公告 栏 NoTICE 更 多 >》 


图 6-50 ”公告 栏 标题 图 6-51 公告 栏 效果 图 
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6.3.6 福娃 简介 区 设计 


福娃 简介 区 是 对 五 个 福娃 * 贝 贝 . 晶 晶 、 欢 欢 、 迎 迎 、 妮 妮 ” 以 图 片 的 形式 进行 展示 , 设 
计 风 格 与 福娃 动态 区 相同 ,具体 设计 步骤 如 下 : 

(1) 在 水 平 标尺 460 像素 处 .470 像素 处 、500 像素 处 和 695 像素 处 分 别 建立 一 条 水 
平 参考 线 , 新 建 “ 福 娃 简介 标题 背景 ”图 层 , 使 用 * 和 矩形 选 框 工具 ”创建 福娃 简介 标题 背景 
选区 ,使 用 快捷 键 Alt 十 Del 填充 #fofof0o 前 景 颜色 。 

(2) 新 建 “ 福 娃 简介 边框 ?图 层 , 使 用 * 和 矩形 选 框 工 具 ? 选 择 福娃 简介 选区 ,选择 “ 编 
辑 ” 一 “ 描 边 " 命 令 , 为 福娃 简介 选区 设置 并 59b7ea 颜色 边框 。 

(3) 使 用 与 福娃 动态 区 相同 的 方法 设置 渐变 辅助 线 .标题 文字 背景 ,并 以 相同 的 方法 
设置 #59b7ea 颜色 的 下 拉线 ,如 图 6-52 所 示 。 


[福娃 


图 6-52 福娃 简介 区 


(4) 打开 素材 beibei. jpg jingjing. jpg、huanhuan. jpg、yingying. jpg 和 nini. jpg 素材 文 
件 , 将 福娃 图 像 放置 到 福娃 简介 区 ,使 用 “编辑 ">“ 自 由 变换 "命令 ,调整 每 个 图 像 的 大 
小 和 位 置 , 使 用 “编辑 ”一 “ 描 边 " 命 令 , 为 每 个 图 像 设 置 # 59b7ea 颜色 边框 ,如 图 6-53 


所 示 。 
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[福娃 简介 ] 


图 6-53 添加 福娃 图 片 


(5) 使 用 “ 模 排 文字 工具 ”为 每 个 福娃 图 片 标识 名 称 ,调整 文字 样式 和 位 置 。 
在 图 层 控制 面板 中 新 建 “福娃 简介 ”组 ,将 相关 的 图 层 放 置 到 “福娃 简介 ”组 中 ,完成 
福娃 简介 区 的 设计 ,其 最 终 效果 如 图 6-54 所 示 。 
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6-54 ”福娃 简介 区 效果 图 


6.3.7 ”福娃 揭秘 区 设计 


福娃 揭秘 区 的 设计 与 公告 栏 区 的 设计 完全 相同 ,这 里 可 以 使 用 复制 图 层 的 方法 将 
“公告 栏 ? 组 进行 复制 ,然后 更 改组 名 称 为 "福娃 揭秘 ,然后 在 每 个 图 层 上 更 改 背景 和 文 
字 , 最 后 更 改 图 层 名 称 , 其 最 终 效果 如 图 6-55 所 示 。 


6.3.8 精彩 图 片区 设计 


精彩 图 片区 以 图 文 的 方式 表现 了 关于 奥运 福娃 的 各 类 图 片 ,其 设计 与 福娃 动态 区 
的 设计 完全 相同 ,这 里 可 以 使 用 复制 图 层 的 方法 将 “福娃 动态 ”组 进行 复制 ,然后 更 改组 
名 称 为 “精彩 图 片 ”, 然 后 在 每 个 图 层 上 更 改 背景 .文字 以 及 图 层 名称 , 调 整 大 小 ,其 最 终 
效果 如 图 6-56 所 示 。 


更 多 >> 


“北京 奥运 特许 商品 零售 店 店 址 临时 销售 点 
“吉祥 物 商 业 魔力 太 鸡 怖 五 “福娃 ” 卖 疯 了 


秘 noyTzE 六 
本 “ 北京 奥运 吉祥 物 上 市 第 一 天 销售 火爆 (组 图 ) 


es “* 价格 从 6 元 到 | 十 几 万 销售 有 望 突破 3 亿 美元 
“设计 思想 : * 粤 组 委 为 “水 货 福 娃 ” 验 正身 并 非 假 冒 商品 
[ 风 贝 ][ 晶 晶 ] [ 欢 欢 ][ 迎 迎 ] [ 妮 妮 1 “福娃 姐 合 : “北京 欢迎 您 ”还 是 “欢迎 你 "? 
“灵感 来 源 : “从 1 个 到 5 个 用 京 燕 代 蔡 龙 一 揭秘 奥运 吉祥 物 
[由 贝 ][ 量 晶 ] [ 欢 欢 ] [ 迎 迎 ][ 亏 妮 ] * 奥运 吉祥 物证 生 记 北 京 2008 奥 运 会 大 事 记 
* 评 剂 内涵 “吉祥 物 受 到 三 重 保护 热门 方案 为 何 落选 
由 由][ 晶 晶 ][ 欢 欢 ] [ 迎 迎 ][ 妮 妮 ] “奥运 吉祥 物 诞生 记 北京 2006 奥 运 会 大 事 记 
“吉祥 物 受 到 三重 保 护 热门 方案 为 何 落选 
6-55 ”福娃 揭秘 效果 图 图 6-56 精彩 图 片 效 果 图 


6.3.9 名 人 说 福娃 区 设计 


名 人 说 福娃 区 罗列 各 界 人 士 对 “2008 北京 奥运 会 吉祥 物 一 一 福娃 ”的 评论 ,其 设计 与 
福娃 动态 区 的 设计 完全 相同 ,这 里 可 以 使 用 复制 图 层 的 方法 将 “福娃 动态 ”组 进行 复制 ， 
然后 更 改组 名 称 为 “名 人 说 福娃 ”, 然 后 在 每 个 图 层 上 更 改 背 景 .文字 以 及 图 层 名 称 ,调整 
大 小 ,其 最 终 效 果 如 图 6-57 所 示 。 
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6.3.10 投票 调查 区 设计 


投票 调查 区 以 互动 的 形式 征求 广大 用 户 对 “北京 奥运 会 吉祥 物 一 福娃 ”网 站 的 满 
意 度 , 其 设计 与 公告 栏 区 的 设计 完全 相同 ,这 里 可 以 使 用 复制 图 层 的 方法 将 “公告 栏 "组 
进行 复制 ,更 改组 名 称 为 "公告 栏 ", 然 后 在 每 个 图 层 上 更 改 背景 ,文字 ,图 层 名 称 ,调整 大 
小 ,其 最 终 效果 如 图 6-58 所 示 。 


[名 人 说 福娃 ] 更 多 >> 投票 调查 vorz 
Eee Re | 
,北京 奥运 特许 商品 零售 店 店 址 人 8 时 销售 点 
,吉祥 物 商业 麻 力 大池 希 五 “福娃 " 卖 疯 了 您 觉得 “北京 奥运 会 雪 样 物 -福娃 
“北京 奥运 吉祥 物 上 市 第 一 天 销售 火爆 姐 图 ) “ 网 站 在 以 下 哪些 方面 存在 不 足 > 
“价格 从 8 元 到 十 几 万 销售 有 望 突破 3 亿美 元 
“ 奥 姐 要 为 “水货 福娃” 验 正身 并 夫 假 冒 商品 et 
“福娃 组 合 : “北京 欢迎 您 ”还 是 “欢迎 你 "? 〇 CB: 互动 功能 
从 1 个 到 5 个 用 京 藻 代 敬 龙 一 揭秘 奥运 吉祥 物 〇 5: 功能 设置 
。 奥运 吉祥 物证 生 记 北 京 2008 奥 运 会 大 事 记 Op 界面 设计 
. 吉祥 物 受 到 | 三 重 保护 热门 方案 为 何 落 寺 ? 
,奥运 吉祥 物证 生 记 北 京 2006 粤 运 会 大 事 记 E 双 
， 吉祥 物 受到 | 三 重 保护 热门 方案 为 何 落选 
图 6-57 名 人 说 福娃 效果 图 图 6-58 投票 调查 区 效果 图 


6.3.11 版 权 区 设计 


版 权 区 主要 是 反映 网 站 的 版 权 ,制作 者 以 及 联系 方式 等 内 容 , 设 计 简单 ,其 具体 步骤 如 下 : 
(1) 新 建 渐 变 背景 ”图 层 , 使 用 ”矩形 选 框 工 具 ” 创 建 版 权 区 背景 选区 ,选择 工具 栏 中 
的 "渐变 工具 ,设置 渐变 样式 ,如 图 6-59 所 示 ,在 渐变 背景 选区 设置 垂直 渐变 效果 。 


6-59 版 权 区 渐变 样式 
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| 司 | 副 副 副 副 副 副 副 副 副 副 副 司 
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(2) 新 建 “ 浙 变 线 ”图 层 ,选择 工具 栏 中 的 “直线 工具 ”, 在 工具 属性 栏 设置 创建 路 径 按 
钮 诺 , 粗 细 为 3px', 在 渐变 背景 上 方 建立 路 径 , 选 择 菜单 中 的 “窗口 ”一 “路径 ”命令 ,调用 
出 路 径 控 制 面板 , 单 击 “ 将 路 径 作为 选区 载 人 ”按钮 将 路 径 转化 为 选区 ,使 用 福娃 动态 区 
中 设置 的 “渐变 辅助 线 ? 渐 变样 式 ,设置 水 平 渐变 效果 。 

(3) 选择 “ 横 排 文字 工具 ”, 输 入 版 权 信息 。 

建立 "版 权 区 ?组 ,整理 图 层 , 最 终 完成 版 权 区 设计 ,其 效果 如 图 6-60 所 示 。 
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6-60 ”版 权 区 效果 图 


值得 注意 的 是 ,设计 完 网 站 的 各 个 区 域 后 ,用 户 可 以 根据 网 站 的 整体 效果 ,对 网 站 的 
局 部 区 域 进行 分 层 修改 ,图 层 控制 面板 如 图 6-61 所 示 。 
至 此 ,网 站 首页 页 面 设计 完成 ,其 效果 图 如 图 6-62 所 示 。 
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6-61 “图 层 " 控 制 面板 
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图 6-62 网 站 首页 效果 图 


6.4 效果 图 断 片 输出 


在 网 页 制作 过 程 中 ,图 片 的 制作 十 分 重要 ,用 户 使 用 Photoshop 可 以 制作 出 更 加 美 
观 的 图 片 ,但 是 图 片 的 大 小 直接 影响 网 页 的 载 入 速度 。Photoshop CS3 支持 . psd、 
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.bmp、. jpg、. gif、. png 等 20 多 种 格式 的 文件 ,在 实际 应 用 中 ,用 户 可 以 根据 实际 需求 来 
选择 图 像 文 件 的 格式 ,下 面 介绍 几 种 常用 的 图 像 文件 格式 。 

1) PSD 格式 

PSD(Photoshop Document) 是 Photoshop 默认 的 文件 格式 。 它 其 实 是 Photoshop 
进行 平面 设计 的 一 张 草稿 图 ,里 面包 含 图 层 、 通 道 , 庶 日 等 多 种 设计 的 原稿 ,以 便于 用 户 
下 次 打开 文件 时 可 以 修改 上 一 次 的 设计 。 

在 Photoshop 所 支持 的 各 种 图 像 格式 中 ,PSD 的 存 取 速度 比 其 他 格式 快 很 多 ,功能 
也 很 强大 。 由 于 Photoshop 越 来 越 被 广泛 地 应 用 ,所 以 有 理由 相信 ,这 种 格式 也 会 逐步 
流行 起 来 。 

2) BMP 格式 

BMP 是 英文 Bitmap( 位 图 ) 的 简写 , 它 是 Windows 系统 中 的 标准 图 像 文件 格式 ,能 
够 被 多 种 Windows 应 用 程序 所 支持 。 随 着 Windows 系统 的 流行 与 丰富 的 Windows 应 
用 程序 的 开发 ,BMP 格式 理所当然 地 被 广泛 应 用 。 这 种 格式 的 特点 是 包含 的 图 像 信息 
较 丰 富 ,几乎 不 进行 压缩 ,但 由 此 导致 了 它 与 生 俱 生来 的 缺点 一 一 占用 磁盘 空间 过 大 。 
因此 ,目前 BMP 在 单机 上 比较 流行 ,在 网 页 中 较 少 使 用 。 

3) JPEG 格式 

JPEG 也 是 常见 的 一 种 图 像 格 式 , 它 由 联合 照片 专家 组 (Joint Photographic Experts 
Group) 开 发 。JPEG 文件 的 扩展 名 为 . jpg 或 .jpeg ,其 压缩 技术 十 分 先进 , 它 用 有 损 压缩 
方式 去 除 宛 余 的 图 像 和 彩色 数据 ,在 获取 得 极 高 压缩 率 的 同时 能 展现 十 分 丰富 生动 的 图 
像 , 换 句 话说 ,就 是 可 以 用 最 少 的 磁盘 空间 得 到 较 好 的 图 像 质量 。 同 时 JPEG 还 是 一 种 很 
灵活 的 格式 ,具有 调节 图 像 质量 的 功能 ,允许 用 不 同 的 压缩 比例 对 这 种 文件 进行 压缩 , 完 
全 可 以 在 图 像 质量 和 文件 尺寸 之 间 找 到 平衡 点 。 

由 于 JPEG 优异 的 品质 和 杰出 的 表现 , 它 的 应 用 也 非常 广泛 ,特别 是 在 网 络 和 光盘 读 
物 上 应 用 更 加 广泛 。 目 前 各 类 浏览 器 均 支 持 JPEG 这 种 图 像 格式 ,因为 JPEG 格式 的 文 
件 尺寸 较 小 ,下 载 速 度 快 ,使 得 网 页 有 可 能 以 较 短 的 下 载 时 间 提 供 大 量 美 观 的 图 像 ， 
JPEG 同时 也 就 顺理成章 地 成 为 网 络 上 最 受 欢迎 的 图 像 格 式 。 

4) GIF 格式 

GIF 是 英文 Graphics Interchange Format( 图 形 交 换 格式 ) 的 缩写 。 它 是 在 WWW 
及 其 他 联机 服务 上 常用 的 一 种 文件 格式 ,用 于 显示 超 文本 标记 语言 文档 中 的 索引 颜色 图 
形 和 图 像 。 

GIF 格式 的 特点 是 压缩 比 高 ,磁盘 空间 占用 较 少 ,所 以 这 种 图 像 格 式 迅 速 得 到 了 广 
泛 的 应 用 。 最 初 的 GIF 只 是 简单 地 用 来 存储 单 幅 静 止 图 像 ( 称 为 GIF87a) ,后 来 随 着 技 
术 的 发 展 , 可 以 同时 存储 若干 幅 静 止 图 像 进而 形成 连续 的 动画 ,使 之 成 为 当时 支持 2D 动 
面 为 数 不 多 的 格式 之 一 。 

此 外 ,考虑 到 网 络 传输 中 的 实际 情况 ,GIF 图 像 格 式 还 增加 了 渐 显 方式 ,也 就 是 说 ， 
在 图 像 传输 过 程 中 ,用 户 可 以 先 看 到 图 像 的 大 致 轮廓 ,然后 随 着 传输 过 程 的 继续 而 逐步 
看 清 图 像 中 的 细节 部 分 ,从 而 适应 了 用 户 的 “从 腾 胱 到 清楚 ”的 观赏 心理 。 但 是 GIF 有 个 
小 小 的 缺点 , 即 不 能 存储 超过 256 色 的 图 像 。 尽 管 如 此 ,这 种 格式 仍 在 网 络 上 大 量 应 用 ， 
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这 和 GIF 图 像 文 件 短小 、 下 载 速度 快 、 可 用 许多 具有 同样 大 小 的 图 像 文 件 组 成 动画 等 优 
势 是 分 不 开 的 。 

5) PNG 格式 

PNG(Portable Network Graphics) 是 一 种 新 兴 的 网 络 图 像 格 式 。PNG 是 目前 保证 
最 不 失真 的 格式 , 它 汲取 了 GIF 和 JPG 二 者 的 优点 ,存储 形式 丰富 , 兼 有 GIF 和 JPG 的 
色彩 模式 。 它 的 另 一 个 特点 是 能 把 图 像 文件 压缩 到 极限 以 利于 网 络 传输 ,但 又 能 保留 所 
有 与 图 像 品质 有 关 的 信息 ,因为 PNG 是 采用 无 损 压 缩 方式 来 减少 文件 的 大 小 ,这 一 点 与 
牺牲 图 像 品质 以 换取 高 压缩 率 的 JPG 有 所 不 同 。 它 的 第 三 个 特点 是 显示 速度 很 快 ,只 需 
下 载 1/64 的 图 像 信息 就 可 以 显示 出 低 分 辩 率 的 预览 图 像 。 另 外 ,PNG 同样 支持 透明 图 
像 的 制作 ,透明 图 像 在 制作 网 页 图 像 时 很 有 用 ,可 以 把 图 像 背景 设 为 透明 ,用 网 页 本 身 的 
颜色 信息 来 代替 设 为 透明 的 色彩 ,这 样 可 让 图 像 和 网 页 背景 很 和 谐 地 融合 在 一 起 。 

PNG 的 缺点 是 不 支持 动画 应 用 效果 ,如 果 在 这 方面 能 有 所 加 强 , 简 直 就 可 以 完全 替代 
GIF 和 JPEG 了 。Macromedia 公司 的 Fireworks 软件 的 默认 格式 就 是 PNG( 现 已 并 购 到 
Adobe 公司 ) 。 现 在 , 越 来 越 多 的 软件 开始 支持 这 一 格式 ,而 且 在 网 络 上 也 越 来 越 流行 。 


6.4.2 ”创建 与 编辑 切片 


用 户 完 成 网 页 效果 图 的 设计 之 后 ,就 可 以 在 图 片 中 划分 出 不 同 的 功能 区 域 ,这 种 功 
能 区 域 就 是 切片 。 

网 页 效果 图 通过 切割 后 ,在 使 用 Dreamweaver 制作 网 页 的 “ 洁 
过 程 中 可 以 在 不 同 的 切片 中 进行 布局 和 编辑 ,另外 ,进行 切割 后 ”号 
也 加 速 了 网 页 的 显示 速度 。 

在 Photoshop CS3 的 工具 栏 提供 了 用 于 创建 和 编辑 切片 的 
切片 工具 组 ,如 图 6-63 所 示 。 


1. 划分 切片 


下 面 以 在 fuwa. psd 文件 中 使 用 切片 工具 划分 切片 为 例 ,介绍 与 切片 相关 的 操作 ,其 
操作 步骤 如 下 : 

(1) 打开 fuwa. psd 效果 图 文件 , 单 击 工具 栏 中 的 “切片 工具 组 ”按钮 ,在 弹出 的 快捷 
菜单 中 ,选择 切片 工具 逆 , 然 后 在 图 像 中 准备 划分 切片 的 区 域 按 下 鼠标 左 键 进行 拖 动 ， 
释放 鼠标 左 键 后 ,软件 自动 划分 将 整个 图 片 划分 为 若 个 切片 选区 ,其 中 每 个 选区 的 左上 
角 显 示 出 当前 切片 选区 的 名 称 。 

(2) 使 用 相同 的 方法 ,以 参考 线 为 辅助 标准 ,为 图 片 中 的 其 他 区 域 绘制 切片 选区 ,最 
终 完成 切片 工作 ,如 图 6-64 所 示 。 


2. 编辑 切片 选项 


利用 切片 工具 在 网 页 图 片 中 创建 切片 后 还 可 以 通过 “切片 选项 ?对 话 框 设置 切片 的 
名 称 ` 超 链接 等 参数 ,具体 步骤 如 下 : 


图 6-63 切片 工具 组 
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6-64 网 站 首页 切片 图 


(1) 选择 工具 栏 中 的 切片 选择 工具 器 ,在 需要 编辑 的 切片 上 单 击 鼠 标 右键 ,在 弹出 
的 快捷 菜单 中 选择 “编辑 切片 选项 "命令 ,打开 “切片 选项 "对话 框 ,如 图 6-65 所 示 。 


切片 选项 


6-65 “切片 选项 "对话 框 


(2) 用 户 在 “切片 选项 ”对 话 框 中 可 以 输入 切片 的 名 称 ,也 可 以 在 需要 超 链 接 的 切片 
中 输入 URL 地 址 等 , 单 击 “ 确 定 ” 按 钮 完成 设置 。 


3. 切片 原则 和 常见 问题 
(1) 切片 是 生成 表格 的 依据 ,切片 的 过 程 要 先 总 体 后 局 部 , 即 先 把 网 页 整体 切 分 成 几 
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个 大 部 分 ,再 细 切 其 中 的 小 部 分 。 
(2) 对 于 渐变 的 效果 或 圆 角 等 图 片 特 殊 效 果 ,需要 在 页 面 中 表现 出 来 的 ,要 单独 切 出 来 。 
(3) 输出 文件 后 ,需要 在 Dreamweaver 中 进行 编辑 ,原则 上 是 少 用 图 片 ,如 果 能 用 背 
景 颜色 代 蔡 的 就 使 用 背景 颜色 ,能 使 用 图 案 的 也 尽 可 能 使 用 图 案 乎 铺 来 形成 背景 ,以 加 
速 网 页 的 显示 。 


6.4.3 输出 切片 


用 户 在 网 页 图 片 中 划分 切片 .编辑 切片 后 ,在 PSD 格式 的 文件 中 只 能 看 到 设置 的 参 
数 , 却 看 不 到 网 页 的 效果 。 如 果 将 制作 的 图 片 发 布 为 . htm 或 . html 格式 的 网 页 文件 ,就 
可 以 在 浏览 器 中 观察 相应 的 效果 了 。 另 外 ,如 果 在 网 页 中 使 用 的 图 片 过 多 则 可 能 会 影响 
浏览 网 页 的 速度 ,所 以 在 发 布 前 还 应 对 图 片 进 行 优化 处 理 ,以 减少 其 存储 空间 。 

Photoshop CS3 提供 了 “存储 为 Web 和 设备 所 用 格式 ?工具 用 于 优化 和 输出 切片 的 
功能 。 

下 面 对 fuwa. psd 图 片 文件 进行 优化 ,然后 输出 为 . html 格式 的 网 页 文件 ,其 具体 操 
作 步 又 如 下 : 

(1) 打开 已 编辑 好 的 切片 文件 fuwa. psd, 选 择 “ 文 件 ” 一 “存储 为 Web 和 设备 所 用 格 
式 ” 命 令 , 打 开 “ 存 储 为 Web 和 设备 所 用 格式 ”对 话 框 。 

(2) 在 对 话 框 中 选择 “原稿 ”选项 卡 , 在 “优化 的 文件 格式 ”下 拉 列 表 框 中 将 图 片 文件 
的 格式 设置 为 JPEG ,在 "品质 "下 拉 列 表 框 中 将 其 品质 设置 为 75, 其 余 选 项 保持 默认 设置 
不 变 ,如 图 6-66 所 示 。 


图 6-66 “原稿 "选项 卡 


(3) 选择 “优化 ”选项 卡 , 在 其 中 可 以 看 到 刚才 对 图 像 进行 处 理 后 的 效果 ,如 文件 格 
式 、 大 小 以 及 在 网 络 中 的 下 载 速 度 等 ,如 图 6-67 所 示 。 
(4) 单 击 “ 存 储 ” 按 钮 ,将 打开 一 个 提示 对 话 框 ,提示 文件 名 称 中 包含 非 拉 丁字 符 , 单 
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[Es 


图 6-67 “优化 "选项 卡 


击 “ 确 定 ” 按 钮 将 其 关闭 ,并 打开 “将 优化 结果 存储 为 ”对话 框 。 

(5) 在 对 话 框 的 “保存 类 型 "下 拉 列 表 框 中 可 以 选择 保存 文件 的 类 型 ,这 里 选择 
“HTML 和 图 像 (* . html) ”选项 ,然后 在 “保存 在 "下 拉 列 表 框 中 指定 存储 文件 的 路 径 ， 
接着 在 “文件 名 ”下 拉 列 表 框 中 输入 文件 名 为 “index. html”, 最 后 单 击 “ 保 存 ” 按 钮 即 可 完 
成 切片 输出 ,如 图 6-68 所 示 。 

将 优化 结果 存储 为 
已 SRS 村 


文件 名 中 |inaexl htnl 
保存 类 型 0): 。 [ITWL 和 图 隐 _(*_htnl) YY 


ER 总 
| 所 有 切片 习 


6-68 “将 优化 结果 存储 为 "对 话 框 


(6) 此 时 ,就 完成 了 网 页 图 片 的 输出 。 在 输出 目录 中 可 以 看 到 一 个 名 为 index. html 
的 网 页 文件 和 一 个 名 为 image 的 图 片 文件 夹 。index. html 文件 可 以 直接 在 浏览 器 中 进 
行 预览 ,也 可 以 在 Dreamweaver 中 做 更 进一步 的 编辑 处 理 。 
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6.5 本 章 人 小结 


Adobe Photoshop CS3 是 Adobe 公司 推出 的 一 款 图 形 图 像 处 理 软件 , 它 横 跨 平面 与 
网 页 多 媒体 的 设计 领域 ,是 一 种 全 球 标准 的 图 像 编辑 解决 方案 。 它 是 设计 、 制 作 、. 美 化 和 
维护 网 站 过 程 中 不 可 或 缺 的 工具 。 在 网 页 设计 过 程 中 ,收集 到 的 一 些 原 始 素材 往往 不 能 
直接 使 用 ,都 需要 做 进一步 的 加 工 处 理 , 因 此 素材 的 加 工 处 理 显得 非常 重要 。 充 分 利用 
Photoshop CS3 强大 的 图 像 处 理 功能 可 以 进行 网 页 页 面 效 果 图 的 设计 和 网 页 中 各 种 图 片 
素材 的 制作 、 编 辑 以 及 美化 等 工作 。 

本 章 首 先 对 Photoshop 的 工作 界面 和 基本 操作 进行 了 简单 的 介绍 ,然后 还 是 以 “ 北 
京 奥运 吉祥 物 一 一 福娃 ”网 站 的 首页 效果 图 设计 为 例 介 绍 了 如 何 利 用 Photoshop 进行 网 
页 效果 图 的 设计 与 制作 ,最 后 简单 介绍 了 效果 图 的 切片 创建 、 编 辑 和 输出 。 


6.6 马 题 
一 、 填 空 题 
1. Photoshop 默认 工作 界面 分 栏 , 分 别 是 
2. Photoshop 中 使 用 快捷 键 时 ,输入 法 必须 处 于 _ 状态。 
3. Photoshop 中 有 种 颜色 模式 ,默认 是 模式 。 
4. 给 图 层 填充 前 景色 的 快捷 组 合 键 是 __。 
5. 撤销 上 一 步 操作 的 快捷 组 合 键 是 。 
二 、 简 答 及 实 训 题 


1. 简 述 网 页 设计 前 需要 哪些 准备 工作 。 

2. 如 何 给 一 个 图 层 填 充 红色 ? 

3. 列举 你 所 知道 的 几 种 图 片 格式 ,并 说 明 其 特点 。 

4. 切片 的 原则 和 常见 的 问题 主要 有 哪些 ? 

5. 完成 如 图 6-69 所 示 的 切片 工作 ,并 导出 为 可 用 的 Web 样式 。 


6-69 切片 原 图 
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动态 网 站 技术 概述 


由 于 静态 网 站 的 网 页 内 容 是 “固定 不 变 ” 的 ,不 会 随 着 访问 者 、 时 间 、 地 点 的 不 同 而 改 
变 , 这 给 网 站 的 后 期 管理 和 维护 带 来 了 很 大 的 不 便 , 比 如 说 网 站 的 某 个 网 页 需要 更 新 , 那 
么 必须 先 把 这 个 网 页 从 Web 服务 器 上 下 载 到 本 地 计算 机 ,然后 进行 修改 更 新 ,最 后 再 将 
更 新 后 的 网 页 重新 上 传 到 Web 服务 器 。 用 户 再 次 打开 此 网 页 或 者 需要 刷新 才能 看 到 更 
新 后 的 内 容 。 另 外 ,静态 网 站 缺乏 交互 性 , 即 不 能 实现 如 留言 板 、 调 查 表 和 论坛 等 功能 。 

动态 网 站 是 指 可 以 进行 交互 的 网 站 ,其 可 以 实现 诸如 留言 板 、 调 查 表 和 论坛 等 功能 ， 
近年 来 ,动态 网 站 技术 得 到 了 长 足 的 发 展 和 广泛 的 应 用 。 


7.1 静态 网 下 与 动态 网 下 


1. 静态 网 站 


静态 网 站 是 指 其 组 成 网 页 是 静态 网 页 , 即 网 页 内 容 是 “固定 不 变 ” 的 ,不 会 随 着 访问 
者 \ 时 间 、 地 点 的 不 同 而 改变 。 当 用 户 的 浏览 器 通过 互联 网 的 HTTP (Hypertext 
Transport Protocol, 超 文本 传输 协议 ) 向 Web 服务 器 请 求 提供 网 页 内 容 时 ,服务 器 仅仅 
是 将 原来 已 设计 好 的 静态 HTML 文档 传送 给 用 户 的 浏览 器 ,其 页 面 的 内 容 使 用 的 仅仅 
是 标准 的 HTML 代码 ,最 多 再 加 上 GIF 格式 的 动态 图 片 或 Flash 动画 等 。 

静态 网 站 的 特点 是 制作 简单 .显示 速度 快 , 但 是 无 交互 性 .不 易 维护 和 更 新 。 


2. 动态 网 站 


动态 网 站 是 指 其 组 成 网 页 主要 是 动态 网 页 , 即 网 页 是 可 以 进行 交互 的 。 当 用 户 的 浏 
览 器 通过 互联 网 的 HTTP 协议 向 Web 服务 器 请 求 提供 网 页 内 容 时 ,服务 器 根据 用 户 浏 
览 器 的 请 求 , 连 接 相 应 的 数据 库 , 然 后 执行 服务 器 端 程序 ,生成 静态 HTML 文档 ,最 后 将 


其 传送 给 用 户 的 浏览 

动态 网 站 的 特点 是 制作 较为 复杂 、 显 示 速 度 较 慢 ,但 是 其 具有 交互 性 ,并 且 方 便 维护 
与 更 新 。 

动态 网 站 的 组 成 网 页 大 部 分 是 动态 网 页 ,但 是 也 会 有 部 分 静态 网 页 ,也 就 是 说 ,在 动 
态 网 站 中 也 会 包含 一 部 分 不 需要 交互 功能 的 静态 网 页 ,并 且 静 态 网 页 制作 技术 是 动态 
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网 页 制作 的 基础 和 根本 ,在 静态 网 页 的 基础 上 添加 服务 器 端 脚 本 代码 就 变 成 了 动态 
网 页 。 


3. 静态 网 站 和 动态 网 站 的 比较 


(1) 交互 性 : 动态 网 站 的 网 页 会 根据 用 户 的 要 求 和 选择 而 动态 地 改变 和 响应 ,浏览 
器 作为 客户 端 ,成 为 一 个 动态 交流 的 桥梁 ,而 静态 网 站 却 不 具有 交互 性 。 

(2) 自动 更 新 : 动态 网 站 无 须 手动 更 新 HTML 文档 , 便 会 自动 生成 新 页 面 ,可 以 大 
大 节省 工作 量 ,而 静态 网 站 却 只 能 手动 更 新 。 

(3) 因 时 因 地 因 人 而 变 : 动态 网 站 当 不 同时 间 不同 地 点 ,不同 用 户 访问 同一 网 址 时 
会 出 现 不 同 页 面 ,而 静态 网 站 的 内 容 在 何 时 、 何 地 、 何 人 访问 时 都 是 一 样 的 。 

(4) 安全 性 : 动态 网 站 的 网 页 是 在 浏览 器 进行 浏览 时 由 Web 服务 器 自动 生成 的 , 即 
客户 端 无 法 看 到 服务 器 端 执行 的 具体 代码 ,相对 而 言 网 站 的 安全 性 较 高 。 而 静态 网 站 的 
网 页 执行 代码 是 完全 可 以 通过 浏览 器 查看 到 的 (例如 在 下 浏览 器 中 ,通过 “查看 ”>“ 源 
文件 ”菜单 命令 可 以 实现 此 操作 ) ,其 安全 性 较 低 。 

需要 提醒 的 是 : 部 分 静态 网 页 或 者 加 入 了 GIF 动画 或 Flash 动画 ,或 者 通过 CSS 实 
现 了 字体 .字形 .颜色 . 缩 进 等 的 控制 ,或 者 通过 客户 端 编程 语言 如 JavaScript 实现 了 浏览 
器 端的 部 分 交互 或 判断 ,但 是 这 些 网 页 仍然 是 静态 网 页 ,或 者 只 能 说 其 具有 “动感 "性 ,但 
是 它们 不 是 真正 的 动态 网 页 。 


7.2 动态 网 咎 的 工作 模 交 


动态 网 站 中 的 动态 网 页 是 当 用 户 提出 请 求 时 由 服务 器 动态 生成 的 网 页 , 即 在 本 地 浏 
览 器 中 看 到 的 网 页 代码 和 在 服务 器 上 执行 的 代码 是 完全 不 同 的 。 浏 览 器 发 出 请 求 之 前 ， 
网 页 中 的 内 容 并 不 存在 ,也 就 是 说 ,浏览 器 中 看 到 的 网 页 代码 以 前 并 不 存在 ,而 是 由 服务 
器 动态 生成 的 ,并 且 根据 发 出 请 求 的 时 间 、 地 点 人物 的 不 同 , 同 一 个 动态 网 页 可 能 返回 
不 同 的 浏览 器 显示 效果 。 

动态 网 站 的 工作 模式 是 典型 的 C/S 模式 (Client/Server), 即 客户 机 /服务 器 模式 ,如 
图 7-1 所 示 。 


用 户 客户 机 


图 7-1 动态 网 站 的 工作 模式 


相对 于 静态 网 站 的 工作 过 程 ,动态 网 站 的 工作 过 程 较为 复杂 ,其 主要 包括 如 下 几 个 
步 又: 
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(1) 用 户 开 发 动态 网 页 ,编写 服务 器 端 脚本 代码 。 

(2) 客户 端 通过 浏览 器 请 求 访问 Web 页 面 。 

(3) Web 服务 器 找到 指定 的 页 面 。 

(4) Web 服务 器 执行 指定 的 页 面 中 相应 的 代码 ,生成 HTML 页 面 。 
(5) HTML 页 面 被 传 回 到 客户 机 的 浏览 器 中 。 

(6) 客户 端的 浏览 器 根据 HTML 给 用 户 显示 Web 页 面 。 


7.3 动态 网 咎 帘 用 技术 


动态 网 站 具有 诸多 静态 网 站 所 不 具备 的 功能 和 特点 ,因此 动态 网 站 开发 技术 逐渐 成 
为 网 站 开发 的 主流 技术 。 目 前 ,Internet 上 的 绝 大 部 分 网 站 均 为 动态 网 站 ,其 常用 的 动态 
网 站 开发 技术 有 ASP、ASP. NET、PHP 和 JSP。 


7.3.1 ASP 技术 


ASP 是 Active Server Page 的 缩写 , 即 * 动 态 服务 器 页 面 "的 意思 ,是 微软 公司 开发 的 
一 种 服务 器 端 脚本 编写 环境 ,可 以 用 来 创建 和 运行 动态 网 页 或 Web 应 用 程序 。ASP 网 
页 可 以 包含 HTML 标记 、 普 通 文 本 、 脚 本 命令 以 及 COM 组 件 等 。 利 用 ASP 可 以 向 网 页 
中 添加 交互 式 内 容 , 也 可 以 创建 使 用 HTML 网 页 作为 用 户 界面 的 Web 应 用 程序 。 它 还 
可 以 与 数据 库 或 其 他 程序 进行 交互 ,是 一 种 简单 方便 的 编程 工具 。 

ASP 网 页 文件 的 扩展 名 为 .asp, 常 用 于 各 种 动态 网 站 中 。 

(1) 利用 ASP 技术 可 以 突破 静态 网 页 的 一 些 功能 限制 ,实现 动态 网 页 技术 。 

(2) ASP 代码 是 嵌入 在 HTML 代码 所 组 成 的 文件 中 的 ,因此 易于 学 习 和 使 用 。 

(3) 服务 器 上 的 ASP 程序 会 在 服务 器 端 执行 ,并 将 结果 以 HTML 格式 传送 到 客 
户 端 浏 览 器 上 ,因此 兼容 性 极 好 ,使 用 各 种 浏览 器 都 可 以 正常 浏览 ASP 所 产生 的 
网 页 。 

(4) ASP 提供 了 一 些 内 置 对 象 , 使 用 这 些 对 象 可 以 使 服务 器 端 脚 本 功能 更 加 强大 ， 
并 且 大 大 节省 了 开发 时 间 ,提高 了 开发 效率 。 

(5) ASP 可 以 使 用 服务 器 端 ActiveX 组 件 来 执行 各 种 各 样 的 特殊 任务 ,如 存 取 数 据 
库 ,发送 E-mail 或 访问 文件 系统 等 ,使 得 网 页 的 功能 更 加 丰富 。 

(6) 由 于 服务 器 是 将 ASP 程序 执行 后 的 结果 以 HTML 形式 传 回 到 客户 端 浏览 器 
的 ,因此 使 用 者 根本 不 会 看 到 ASP 所 编写 的 原始 程序 代码 ,可 防止 ASP 程序 代码 被 窃 
取 , 提 高 了 网 站 的 安全 性 。 

(7) 利用 ASP 可 以 方便 地 连接 Access 或 SQL 数据 库 , 这 为 网 站 的 开发 提供 了 便捷 
的 路 径 。 

(8) ASP 不 仅 可 以 与 HTML 结合 开发 网 站 ,也 可 以 与 XHTML (eXtensible 
HyperText Markup Language, 可 扩展 超 文本 标记 语言 ) 和 WML (Wireless Markup 
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Language, 无 线 标记 语言 ) 结 合 制作 WAP 手机 网 站 。 
正 是 因为 ASP 技术 具有 如 上 所 述 的 诸多 优点 ,所 以 也 是 目前 应 用 最 为 广泛 的 动态 
网 站 制作 技术 。 


7.3.2 ASP.NET 技术 


ASP. NET 的 前 身 是 ASP 技术 。1997 年 ,微软 公司 针对 ASP 的 缺点 准备 开发 一 
个 新 的 类 似 项 目 ,Scott Guthrie 和 IIS 团队 的 Mark Anders 经 理 一 起 合作 了 两 个 多 月 ， 
开发 出 了 下 一 代 ASP 技术 的 原型 。 这 个 原型 产品 使 用 的 是 Java 语言 ,并 且 命名 
为 XSP。 

后 来 ,为 了 将 XSP 移植 到 CLR(Common Language Runtime, 通 用 语言 运行 时 ) 中 ， 
XSP 团队 将 XSP 的 内 核 程序 全 部 又 以 C# 语 言 重 新 编写 ,并 且 改 名 为 ASP+ 。 

2000 年 第 二 季 时 ,微软 正式 推动 . NET 策略 ,ASP+ 也 就 顺理成章 地 改名 为 
ASP. NET。 第 一 个 版 本 的 ASP. NET 在 2002 年 1 月 5 日 亮相 。 

ASP. NET 网 页 文件 的 扩展 名 为 . aspx。 

(1) 简单 易学 。ASP. NET 构架 是 可 以 使 用 微软 公司 的 Visual Studio. NET 开发 环 
境 进 行 开发 的 ,由 于 Visual Studio. NET 是 一 种 所 见 即 所 得 的 开发 模式 ,大 部 分 常用 的 
功能 模块 ,只 需要 用 鼠标 操作 就 可 以 实现 ,省 去 了 编写 代码 的 麻烦 ,所 以 对 用 户 来 说 简 
单 易学 。 

(2) 功能 强大 。 因 为 ASP. NET 是 基于 通用 语言 的 编译 而 运行 的 ,所 以 通用 语言 
的 基本 库 .消息 机 制 .数据 接口 的 处 理 都 能 无 缝 地 整合 到 ASP. NET 的 Web 应 用 中 。 用 
户 在 开发 中 可 以 选择 一 种 最 适合 自己 的 语言 来 编写 程序 .如 C# 、VB、JavaScript、C++ 
等 ,这 些 都 让 ASP.NET 的 功能 变 得 十 分 强大 。 

(3) 管理 方便 。ASP. NET 使 用 一 种 基于 字符 的 、 分 级 的 配置 系统 ,使 服务 器 环境 和 
应 用 程序 的 设置 更 加 简单 。 因 为 配置 信息 都 保存 在 简单 的 文本 文件 中 ,新 的 配置 信息 有 
可 能 不 需要 启动 本 地 的 管理 员工 具 就 可 以 生效 。 


7.3.3 PHP 技术 


PHP 是 英文 Hypertext Preprocessor 的 缩写 , 即 “ 超 级 文本 预 处 理 ” 的 意思 。PHP 是 
一 种 跨 平 台 的 HTML 内 和 骸 式 的 语言 ,是 一 种 在 服务 器 端 执 行 的 做 入 HTML 文档 的 脚本 
语言 ,语言 的 风格 类 似 于 C 语言 ,被 广泛 地 运用 到 动态 网 站 开发 中 。 

PHP 的 语法 混合 了 C Java、Perl 以 及 PHP 自身 的 语法 。 用 PHP 开发 的 动态 页 面 
与 其 他 编程 语言 开发 的 网 页 相 比 ,其 执行 效率 比 完全 生成 HTML 标记 的 网 页 要 快 很 多 。 
PHP 还 可 以 执行 编译 后 代码 ,编译 可 以 达到 加 密 和 优化 代码 的 运行 ,使 代码 运行 更 快 。 
PHP 具有 非常 强大 的 功能 ,所 有 的 CGI(Common Gateway Interface, 通 用 网 关 接 口 ) 的 
功能 PHP 都 能 实现 ,而 且 支 持 几 乎 所 有 流行 的 数据 库 和 操作 系统 。 

PHP 网 页 文件 的 扩展 名 为 . php。 
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(1) PHP 是 免费 的 ,可 以 从 PHP 官方 网 站 (http://www. php. com) 自 由 下 载 PHP 
的 相关 软件 。 

(2) PHP 是 开源 的 ,所 有 的 PHP 源 代 码 理 论 上 都 可 以 得 到 。 

(3) PHP 程序 开发 效率 高 ,运行 速度 快 。 相 对 于 其 他 语言 ,编辑 简单 ,实用 性 强 ,更 
适合 初学 者 。 

(4) 由 于 PHP 是 运行 在 服务 器 端的 脚本 ,可 以 运行 在 UNIX、Linux、Windows 等 环 
境 下 ,所 以 跨 平台 性 强 。 

(5) 由 于 PHP 消耗 相对 较 少 的 系统 资源 ,所 以 其 运行 效率 高 。 

(6) 利用 PHP 可 以 动态 创建 图 像 。 

(7) 在 PHP4 和 PHP5 中 ,面向 对 象 功 能 得 到 了 很 大 的 改进 ,因此 可 以 用 来 开发 大 型 
商业 系统 。 


7.3.4 JSP 技术 


JSP 是 英文 Java Server Pages 的 缩写 , 即 *Java 服务 器 页 面 ” 的 意思 。JSP 是 由 Sun 
Microsystems 公司 倡导 ,众多 公司 参与 一 起 建立 的 一 种 动态 网 页 技术 标准 。JSP 技术 类 
似 于 ASP 技术 , 它 是 在 传统 的 HTML 网 页 文件 中 插入 Java 程序 段 或 JSP 标记 ,从 而 形 
成 JSP 文 件 。 用 JSP 开发 的 Web 应 用 是 跨 平台 的 , 既 能 在 Linux 上 运行 ,也 能 在 其 他 操 
作 系 统 上 运行 。 

JSP 网 页 文件 的 扩展 名 为 .jsp。 

JSP 技术 具有 如 下 特点 。 

(1) 跨 平 台 性 。JSP 基本 上 可 以 在 所 有 平台 上 的 任意 环境 中 开发 ,可 以 在 任意 环境 
中 进行 系统 部 署 , 可 以 在 任意 环境 中 进行 扩展 。 

(2) 可 伸缩 性 。 从 只 有 一 个 小 的 Jar 文件 就 可 以 运行 Servlet/JSP, 到 由 多 台 服 务 器 
进行 集群 或 负载 均衡 ,进行 事务 处 理 和 消息 处 理 。 

(3) 多 样 化 和 功能 强大 的 开发 工具 支持 。Java 已 经 有 许多 非常 优秀 的 开发 工具 ,而 
且 大 部 分 是 免费 的 ,并 且 其 中 许多 已 经 可 以 顺利 地 运行 在 多 种 平台 下 。 

(4) 支持 大 量 服务 器 端 组 件 。Web 应 用 需要 强大 的 服务 器 端 组 件 来 支持 ,开发 人 员 
需要 利用 其 他 工具 设计 实现 复杂 功能 的 组 件 供 Web 页 面 调 用 ,以 增强 系统 性 能 。JSP 可 
以 使 用 成 熟 的 Java Beans 组 件 来 实现 大 量 的 复杂 功能 。 


7.4 动态 Web 服务 颖 


静态 网 页 制作 好 以 后 ,可 以 直接 在 浏览 器 中 进行 预览 和 测试 ,但 是 动态 网 页 制作 好 
以 后 ,必须 要 在 Web 服务 器 上 进行 预览 和 测试 ,也 就 是 说 需要 搭建 一 个 Web 服务 器 的 环 
境 , 用 来 开发 测试 动态 网 页 ,甚至 可 以 直接 用 来 发 布 静态 网 站 和 动态 网 站 。 
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对 于 Windows 平台 来 说 ,IIS 就 是 标准 的 Web 服务 器 ,而 对 于 UNIX 和 Linux 平台 
来 说 ,Apache 就 是 最 常用 的 Web 服务 器 。 


7.4.1 IIS 搭建 Web 服务 器 


IIS(Internet Information Server, 因特网 信息 服务 器 ) 是 Microsoft 公司 开发 的 Web 
服务 器 技术 ,提供 了 强大 的 Internet 和 Intranet 服务 功能 。IIS 具有 简单 易 用 、 安 全 可 靠 、 
集成 化 管理 等 特点 , 它 集成 了 Web 服务 FTP 服务 .NNTP 服务 和 SMTP 服务 ,分 别 用 
于 网 页 浏览 ,文件 传输 、 新 闻 服 务 和 邮件 发 送 等 方面 ,使 用 户 能 够 在 网 络 上 方便 地 发 布 
信息 。 

IIS 的 安装 、 配 置 和 使 用 已 经 在 本 书 的 第 2 章 “ 网 站 开发 环境 的 搭建 "2. 5 节 “IIS 的 安 
装 与 配置 "中 做 了 详细 的 介绍 ,在 此 不 再 袭 述 。 

需要 强调 的 一 点 是 : 完成 Web 站 点 的 配置 以 后 ,如 果 要 测试 动态 网 页 , 则 必须 在 浏 
览 器 的 地 址 栏 中 输入 “http://localhost/ 路 径 / 动 态 网 页 文件 名 ”或 ”http:// 主 机 的 IP 地 
址 /路 径 /动态 网 页 文件 名 ?来 实现 ,不 能 直接 双击 打开 测试 。 


7.4.2 Apache 搭建 Web 服务 器 


1. Apache 简介 


Apache 取 自 "A Patchy Server” 的 谐音 , 即 “ 充 满 补 丁 的 服务 器 ”的 意思 。Apache 是 
世界 上 使 用 排名 第 一 的 Web 服务 器 软件 , 它 可 以 运行 在 几乎 所 有 广泛 使 用 的 计算 机 平 
台 上 (包括 Windows 平台 )。 

Apache 源 于 NCSAhttpd 服务 器 ,经 过 多 次 修改 ,已 成 为 世界 上 最 流行 的 Web 服务 
器 软件 之 一 。 因 为 它 是 自由 软件 ,所 以 不 断 有 人 来 为 它 开发 新 的 功能 .新 的 特性 、 修 改 原 
来 的 缺陷 。Apache 的 特点 是 简单 、 速 度 快 .性 能 稳定 ,并 可 作 代 理 服务 器 来 使 用 。 

Apache 起 初 只 用 于 小 型 或 试验 型 Internet 网 络 .后 来 逐步 扩充 到 各 种 UNIX 系统 
中 ,尤其 对 Linux 的 支持 相当 完美 。 


2. Apache 的 安装 


由 于 UNIX 和 Linux 系统 平台 一 般 用 户 很 少 使 用 ,所 以 接 下 来 以 Windows 系统 平 
人 台 为 例 ,介绍 Apache 的 安装 与 配置 。 

(1) 在 Apache 的 官方 网 站 (http://httpd. apache. org/download. cgi) 下载 最 新 版 本 
的 Windows 系统 平台 下 的 Apache HTTP Server 软件 (目前 的 最 新 版 本 为 2.2.17, 下 载 
后 的 文件 名 为 httpd-2. 2. 17-win32-x86-no_ssl. msi) 。 

(2) 运行 下 载 好 的 “httpd-2. 2. 17-win32-x86-no_ssl. msi” 文 件 , 出 现 如 图 7-2 所 示 的 
安装 向 导 对 话 框 。 

(3) 单 击 Next 按钮 ,打开 “许可 条 例 ” 对 话 框 ,如 图 7-3 所 示 。 选 择 I accept the 
terms in the license agreement 选项 . 即 同意 软件 安装 使 用 许可 条 例 。 


第 人 Ms 动态 网 站 技术 概述 


217 


Welcome to the Installation Wizard for 
Apache HTTP Server 2.2.17 


The Installation Wizard will install Apache HTTP Server 2.2.17 


on your computer, To continue, cick Next. 


WARNING: This program is protected by copyright law and 
international treaties, 


7-2 “安装 向 导 ” 对 话 框 


License Agreement 
Please read the folowing license agreement carefully, 


Apache License 
Version 2.0, January 2004 
http:/www.apache.org/licenses/ 


[TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 
1. Definitions 
"License shall mean the terms and conditions for use, reproduction, and 


distribution as defined by Sections 1 through 9 ofthis document. 


Ol accept the terms in the hcense agreement] 


OO1 do not accept the terms in the license agreement 


Next> 


图 7-3 “许可 条 例 ” 对 话 框 


(4) 单 击 Next 按钮 ,打开 “使 用 须知 ”对 话 框 ,如 图 7-4 所 示 , 阅 读 将 Apache 安装 到 


Windows 上 的 使 用 须知 。 


(5) 单 击 Next 按钮 ,打开 “服务 器 信息 ”对 话 框 ,如 图 7-5 所 示 。 


在 Network Domain 下 面 的 文本 框 中 输入 域名 ;在 Server Name 下 面 的 文本 框 中 输 
入 服务 器 名 称 , 也 就 是 主机 名 加 域名 ;在 Administrator's Email Address 下 面 的 文本 框 中 


输入 系统 管理 员 的 联系 电子 邮件 地 址 。 


上 述 这 三 条 信息 仅 供 参考 ,其 中 系统 管理 员 的 联系 电子 邮件 地 址 会 在 当 系 统 出 现 故 


障 时 提供 给 访问 者 ,当然 这 三 条 信息 均 可 任意 填写 。 


选中 for All Users,on Port 80 ,as a Service 一 Recommended( 为 系统 所 有 用 户 安装 ， 


使 用 默认 的 80 端口 ,并 且 作 为 系统 服务 自动 启动 ) 选 项 。 
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得 pache HITP Server 2.2 - Installation Wizard 


Read This First 
Read this Before Running Apache on Windows. 


Apache HTTP Server 


atis it? 

The Apache HTTP Server is a powerful and flexible HTTP/1 .1 compliant web server 
Originally designed as a replacement forthe NCSA HTTP Server, it has grown to be 
the most popular web server on the Internet. As a project ofthe Apache Software 
Foundation, the developers aim to collaboratively develop and maintain a robust, 
commercial-grade, standards-based server with freely available source code 


he Latest Version 
Details of the latest version can be found on the Apache HTTP server project page 
under 

http/httnd. apache ora/ 


7-4 “使 用 须知 ”对 话 框 


Server Information 
Please enter your server's information, 


Network Domain (e.g. somenet.com) 
[yestudio.com 


Server Name (e.g, www.somenet,com); 


www. Fylstudio.com 

Administrator's Email Address (e.g, webmaster@somenet,com): 
Fhm@lzcu,edu.cn 

Install Apache HTTP Server 2.2 programs and shortcuts For: 


© For Al Users, on Port 80, as a Service — Recommended. 
Oonly for the Current User, on Port 8080, when started Manually. 


S| 


图 7-5 “服务 器 信息 ”对 话 框 


(6) 单 击 Next 按钮 ,打开 “安装 类 型 ”对 话 框 ,如 图 7-6 所 示 。 

(7) 选中 Custom( 自 定义 安装 类 型 ) , 单 击 Next 按钮 .打开 “ 自 定义 安装 ”对 话 框 ,如 
图 7-7 所 示 。 

(8) 单 击 Apache HTTP Server 2. 2. 17, 如 图 7-8 所 示 , 在 弹出 的 快捷 菜单 中 选中 
This feature,and all subfeatures, will be installed on local hard drive. , 即 “ 此 部 分 ,及 下 
属 子 部 分 内 容 , 全 部 安装 在 本 地 硬盘 上 ”。 

(9) 单 击 Change 按钮 ,打开 “改变 安装 目标 文件 夹 ”对 话 框 ,如 图 7-9 所 示 。 在 此 ,可 
以 根据 自己 的 需要 进行 选择 ,如 *D:\”。 一 般 建议 不 要 把 Apache 安装 在 操作 系统 所 在 的 
分 区 :以免 操作 系统 出 现 问题 ,恢复 或 重 装 系统 后 还 要 再 次 安装 配置 Apache。 
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瘟 pache HTTP Server Installation Wizard 


Setup Type 
Choose the setup type that best sukts your needs. 


Please select a setup type. 


OIypical 
Typical program features will be installed, (Headers and Libraries 
For comping ) 


modules wil not be installed. 


Instalshield 


7-6 “安装 类 型 "对 话 框 


间 Apache HITP Server 2-2 - Installation Wizard 


Custom Setup 
Select the program features you want nstalled, 


Clck on an kcon In the lst below to change how a feature is instaled, 
f ] | Feature Description 
TO The poche HTP Web server 


Buld Headers and Libraries 
了 | ApR Iconv Code Pages 


了 | Apache Documentation 
了 | Apache Service Taskbar Icon This Feature requires OKB on 
your hard drive, It has 3 of 3 
selected. 


Ta to: 
C:\Program Files\Apache Software Foundation\Apache2,2\ 


Irisslshed 一 一 2 


[Cup |][ ae。 _][ 


图 7-7 “ 自 定义 安装 "对话 框 


人 Apache HTIP Server 2.2 — Installation Wizard 多) 


Custom Setup 
Select the program features you Want installed. 


Click on an icon in the list below to change how a feature is installed. 


= | 


This feature will be installed on local hard drive 


网 This feature will be installed to run from network 
This feature, and all subfeatures, will be installed to run from the network. 


X This feature will not be availsble 


Install to: 
C:\Program Files\Apache Software Foundation\Apache2.2\ 


7-8 右键 快捷 菜单 
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沪 pache HITP Server 2.2 - Installation Wizard 


Change Current Destination Folder 
Browse to the destination folder. 


Lookin: 
5OFT(0:) 


host 
OProgram Fies 
Raven 


Eolder name; «(Note that backslashes are required, Use C:\path, not CijPath) 


Ce 


7-9 “改变 安装 目标 文件 夹 ” 对 话 框 


(10) 单 击 OK 按钮 返回 ,然后 单 击 Next 按钮 ,打开 “准备 安装 ”对 话 框 ,如 图 7-10 


所 示 。 


六 pache HITP Server 2.2 - Installation Wizard 


Ready to Install the Program 
The wizard is ready to begn installation. 


Chick Install to begin the installation, 
If you want to review or change any of your installation settings, click Back, Clck Cancel to 
exk the wizard. 


图 7-10 “准备 安装 "对话 框 


(11) 确认 上 述 步 又 的 操作 无 误 后 , 单 击 Install 按钮 开始 安装 程序 ,如 图 7-11 所 示 。 
(12) 系统 自动 安装 完成 之 后 ,弹出 “安装 完成 "对话 框 ,如 图 7-12 所 示 , 单 击 Finish 


按钮 返回 。 
(13) 安装 成 功 之 后 ,Windows 右 下 角 的 状态 栏 会 出 现 一 个 带 绿 色 三 角形 的 图 标 圈 ， 


这 表示 Apache 服务 器 已 经 正常 运行 。 
单 击 这 个 图 标 , 选 中 Apache 2.2, 则 弹出 一 个 快捷 菜单 ,如 图 7-13 所 示 。 有 “Start 
(启动 )”“Stop( 停 止 )”“Restart( 重 启动 )” 三 个 选项 ,方便 用 户 对 Apache 服务 器 进行 相 


关 的 操作 。 
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兽 pache HITP Server 2.2 - Installation Wizard 


Installing Apache HTTP Server 2.2.17 
The program features you selected are beng nstaled. 


Please Wai While the Installation Wizard instals Apache HTTP Server 
2.2.17, This may take several minutes， 


CD 


7-11 “正在 安装 ”对 话 框 


Installation Wizard Completed 


The Installation Wizard has successfully installed Apache HTTP 
Server 2.2.17, Clck Finish to ex the wizard, 


Stop 
Restart 


图 7-12 “安装 完成 "对话 框 图 7-13 快捷 菜单 


(14) 在 浏览 器 的 地 址 栏 中 输入 “http://localhost” 或 “http://127.0.0.1” 进 行 测试 ， 
如 果 显 示 如 图 7-14 所 示 的 画面 , 则 表示 Apache 服务 器 已 经 安装 成 功 。 


忆 http://Iocalhost/ - Nicrosoft Internet Ezplorer 
文件 中 ”编辑 时 查看 WD) 收藏) 工具 CD) 帮助 0 


i @mm- © 国 国 @ Pr Wa 加 | 合 - 


地 址 色相 http://1ocalhost/ [SI 


It works! 


7-14 浏览 器 测试 画面 
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3. Apache 的 配置 


Apache 安装 目录 下 的 “Apache2\htdocs” 文 件 夹 就 是 网 站 的 默认 根 目录 ,用 户 只 要 在 
里 面 放 入 文件 就 可 以 进行 测试 了 ,但 是 对 Apache 进行 配置 可 以 更 加 有 效 地 对 其 加 以 
使 用 。 

(1) 依次 单 击 “开始 ”- 王 所 有 程序 ”一 Apache HTTP Server 2. 2 一 Configure Apache 
Server->Edit the Apache httpd conf Configuration file, 打 开 Apache 的 配置 文本 文件 ,如 
图 7-15 所 示 。 


文件 四 编辑 下 ) 格式 人 0) 查看 他 ) 帮助 虽 


This is the main Apache HTTP server configuration File. It contains the 
# configuration directives that give the server its instructions- 

# See <URL:http://httpd.apache .org/docs/2.2> For detailed information- 

#8 In particular, See 

# CURL :http://httpd.apache .org/docs/2.2/nod/directives.htnl> 

# For a discussion of each configuration directive. 

中 


# Do NOT sinmply read the instructions in here without understanding 

# what they do. They're here only as hints or reninders. IF you are unsure 
# consult the online docs. You have been warned- 

中 


## Configuration and logfile nanes: If the Filenanes you specify for nany 
"(or “drive:/” For Wing2), the 
~ IF the Filenanes do «not* begin 
# with "/", the value of ServerRoot is prepended -- so “10gs/Fo0.10g" 
# with ServerRoot set to “D:" will be interpreted by the 
# Server as "D:/10gs/Fo0.10g". 


# NOTE: Where Filenanes are specified, you must use Forward slashes 
# instead of backslashes (e.g., "c:/apache” instead of “c:\apache"). 


# an explicit drive letter in absolute paths to avoid confusion. 


ServerRuut: The top uf the yirectory Lree under ohith tne servers 
# configuration, error, and 10g files are kept- 


# Do not add a slash at the end of the directory path. IfF you point 

# ServerRoot at a non-local disk, be sure to point the LockFile directive 
# at a local disk. IF you wish to share the sane ServerRoot For multiple 
# httpd daenons, you will need to change at least LockFile and PidFile. 


图 7-15 Apache 的 配置 文本 文件 


需要 提醒 的 是 : 每 次 配置 完成 并 且 保 存 之 后 ,必须 让 Apache 服务 器 重启 动 才能 生 
效 , 可 以 使 用 状态 栏 中 的 图 标 方便 地 实现 服务 器 重启 动 。 

(2) 找到 DocumentRoot "D:/htdocs" ,如 图 7-16 所 示 , 其 中 双 引 号 中 的 内 容 可 以 修 
改 为 用 户 自己 的 网 站 目录 。 

需要 提醒 的 是 : 路 径 中 的 “\" 在 Apache 里 要 改 为 */”。 

(3) 找到 DirectoryIndex, 在 其 后 面 可 以 配置 网 站 的 主页 文件 名 ,如 果 配 置 了 多 个 主 
页 文件 名 , 则 在 文件 名 之 间 用 半角 空格 分 隔 即 可 ,如 图 7-17 所 示 。 

(4) Apache 的 常用 配置 就 此 两 项 ,保存 退出 .重新 启动 Apache 服务 器 ,所 做 的 配置 
就 已 经 生效 了 。 

在 Windows 系统 平台 下 ,不 论 是 IIS 还 是 Apache, 正 确 安 装配 置 之 后 ,都 可 以 进行 
动态 网 站 的 开发 与 调试 。 

需要 提醒 的 是 : IIS 多 用 于 ASP 动态 网 站 的 开发 与 调试 ,而 Apache 多 用 于 PHP 动 
态 网 站 的 开发 与 调试 ,如 果 在 Apache 基础 上 再 安装 诸如 iASP 模块 之 后 也 可 以 用 来 开发 
与 调试 ASP 动态 网 站 。 
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十 httpd- conf - 记事 本 
文件 中 编辑 下 ) 格式 中 查看 WD 帮助 人 D 


ServerHane gives the nane and port that the server uses to identify itself- 
This can often be determined autonatically, but we reconnend you specify 
it explicitly to prevent problens during startup. 

IF your host doesn't have a registered DNS nane, enter its IP address here. 


eruerHame www.fylstudio.con:80 


中 
中 
中 
中 
中 
中 
中 
HS 


# DocunentRoot: The directory out of which you will serve your 

# docunents. By default, all requests are taken From this directory, but 
## synbolic links and aliases nay be used to point to other locations. 

和 


DocunentRoot “D:/htdocs"| 


# Each directory to which Apache has access can be configured with respect 
# to which services and Features are allowed and/or disabled in that 

## directory (and its subdirectories). 

中 


## First, we configure the “default” to be a very restrictive set of 
# Features. 


7-16 配置 网 站 根 目录 


醒 httpd. conf - 记事 本 

文件 加 编辑 下 ) 格式 中 ) 查看 WV) 帮助 0 
# AllowOverride controls what directives may be placed in .htaccess files. 
#1t can be “All", "None”, or any combination of the keywords: 
Options FileInfo AuthConfig Linit 


AllowOverride Hone 


中 
# Controls who can get stuff from this server. 
日 


Order allow,deny 
Allow Fron all 


<¢/Directory> 


# DirectoryIndex: sets the file that Apache will serve if a directory 
is requested- 


<IFHodule dir nodule> 
Directoryindex index.htnl index.php index-htn default-htnl default.php default.html 
/IFModule> 


图 7-17 配置 网 站 主页 文件 名 


7.5 本 章 小 结 


动态 网 站 是 指 可 以 进行 交互 的 网 站 ,其 可 以 实现 诸如 留言 板 、 调 查 表 和 论坛 等 功能 ， 
所 以 近年 来 ,动态 网 站 技术 得 到 了 长 足 的 发 展 和 广泛 的 应 用 。 

本 章 首 先 介绍 了 静态 网 站 和 动态 网 站 的 概念 ,并 且 对 静态 网 站 和 动态 网 站 的 特点 进 
行 了 比较 ,然后 对 目前 最 为 常用 的 动态 网 站 制作 技术 ASP、ASP. NET、PHP 和 JSP 的 产 
生 、 发 展 和 特点 分 别 进行 了 叙述 ,最 后 介绍 了 如 何 使 用 IIS 和 Apache 搭建 Web 服务 器 。 

IIS 多 用 于 ASP 动态 网 站 的 开发 与 调试 ,而 Apache 多 用 于 PHP 动态 网 站 的 开发 与 
调试 ,如 果 在 Apache 基础 上 再 安装 诸如 iASP 模块 之 后 也 可 以 用 来 开发 与 调试 ASP 动 
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7.6 习 是 
一 、 填 空 题 
1. ASP 是 的 简称 ,JSP 是 的 简称 。 
2. IIS 是 的 简称 ,中 文 名 为 
3. PHP 不 仅 可 以 运行 在 Windows 平 台 , 还 可 以 运行 在 ， 平台 。 
4. 常用 的 动态 网 站 开发 技术 有 ， ， 
5. 在 UNIX 和 Linux 平 台 上 ， 是 最 常用 的 Web 服务 器 。 
二 、 简 答 及 实 训 题 
1. 简 述 动态 网 站 与 静态 网 站 的 不 同 。 
2. 动态 网 站 的 工作 过 程 一 般 分 为 哪些 步骤 ? 
3. ASP 技术 有 哪些 特点 ,JSP 技术 有 哪些 特点 ? 
4. 安装 Apache 服务 器 ,并 进行 配置 与 测试 。 


ASP 基础 知识 


ASP 是 微软 公司 开发 的 一 种 服务 器 端 脚 本 编写 环境 ,可 以 用 来 创建 和 运行 动态 网 页 
或 Web 应 用 程序 。ASP 网 页 可 以 包含 HTML 标记 、 普 通 文本 、 脚 本 命令 以 及 COM 组 
件 等 。 利 用 ASP 可 以 向 网 页 中 添加 交互 式 内 容 , 也 可 以 创建 使 用 HTML 网 页 作为 用 户 
界面 的 Web 应 用 程序 。 它 还 可 以 与 数据 库 或 其 他 程序 进行 交互 ,是 一 种 简单 ,方便 的 编 
程 工具 。 

由 于 ASP 简单 易学 方便 开发 、 功 能 强大 ,并 且 在 Internet 上 已 有 大 量 的 ASP 源码 
程序 可 以 下 载 使 用 ,所 以 接 下 来 的 内 容 就 以 ASP 技术 为 例 , 介 绍 动态 网 站 的 开发 。 


8.1 ASP 的 运行 与 和 开发 环境 


1. ASP 的 运行 环境 


ASP 是 一 种 动态 网 站 制作 技术 ,所 制作 网 页 的 扩展 名 为 . asp, 不 能 直接 在 浏览 器 中 
进行 预览 ,需要 配置 专用 的 Web 服务 器 才能 正常 运行 。 

微软 公司 的 IIS 就 是 使 用 最 简单 .最 方便 的 运行 ASP 网 站 的 Web 服务 器 ,正确 安装 
配置 IIS 之 后 就 可 以 进行 ASP 动态 网 站 的 开发 了 。 

需要 提醒 的 是 : 必须 把 制作 好 的 ASP 文件 放置 到 IIS* 主 目录 ”选项 卡 中 所 设置 的 
“本 地 路 径 ? 中 ,并且 通过 在 浏览 器 的 地 址 栏 中 输入 "http://localhost/ 路 径 /动态 网 页 文 
件 名 ?或 “http:// 主 机 的 IP 地址/ 路径 /动态 网 页 文件 名 ”的 形式 来 测试 ASP 网 页 。 


2. ASP 的 开发 环境 


由 于 ASP 是 一 种 脚本 语言 ,其 实质 是 纯 文本 形式 的 文件 ,所 以 开发 时 可 以 使 用 
Windows 自 带 的 “记事 本 ”程序 进行 编辑 ,也 可 以 在 Dreamweaver 的 “代码 ?视图 中 进行 
编辑 。 

在 大 多 数 情况 下 ,动态 网 页 是 在 静态 网 页 的 基础 上 进行 ASP 脚本 编辑 的 ,并 且 在 
Dreamweaver 的 “代码 ”视图 中 有 行 号 提示 \ 语 法 提示 、 自 动 续 写 、 颜 色 标 识 等 诸多 方便 之 
处 ,所 以 一 般 情况 下 ,习惯 选用 Dreamweaver 开发 ASP 动态 网 页 。 
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8.2 ASP 的 基本 征 法 规则 


ASP 虽然 是 一 种 脚本 语言 ,但 是 它 也 有 自己 的 一 些 基 本 语法 规则 。 
1. ASP 的 所 有 语句 需要 放 在 一 组 % 内 .格式 为 : 


<$ASP 语句 或 语句 块 $> 


2. ASP 可 以 使 用 两 种 脚本 引擎 , 即 VBScript 和 JavaScript。 它 们 的 功能 类 似 , 运 行 环 
境 相同 ,但 是 相对 而 言 ,JavaScript 多 用 于 客户 端 脚本 ,而 VBScript 多 用 于 服务 器 端 脚本 。 

(1) VBScript 是 ASP 默认 的 脚本 语言 ,可 以 直接 使 用 ,而 如 果 要 使 用 JavaScript 
作为 ASP 的 脚本 , 则 需要 在 代码 页 面 的 顶端 (第 一 行 ) 加 上 “<%@ language = 
"javascript" % 记 ”作为 说 明 ( 不 包括 引号 )。 

(2) VBScript 不 区 分 大 小 写 ,而 JavaScript 区 分 大 小 写 。 

(3) ASP 编程 中 ,HTML 标记 、 和 脚本 代码 .ASP 的 对 象 .ASP 的 组 件 .第 三 方 的 组 件 
可 以 混合 在 一 起 使 用 。 

(4) ASP 网 页 的 文件 扩展 名 为 . asp。 

(5) ASP 中 的 注释 符号 是 单 引号 (")。 

(6) ASP 编程 中 ,所 有 的 标点 符号 (字符 串 中 的 标点 符号 除外 ) 均 为 英文 半角 状态 下 
的 标点 符号 。 

下 面 , 先 看 一 个 简单 的 ASP 例子 。 

【实例 8-1】 第 一 个 ASP 的 例子 (8-1. asp) 。 

(1) 打开 Dreamweaver, 执 行 菜单 命令 "文件 ”一 “新 建 ”, 弹 出 "新建 文档 ”对 话 框 ,如 
图 8-1 所 示 。 


国 cuaarasion 组 件 
雪 匡 
图 re 


8-1 “新 建文 档 " 对 话 框 
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从 左 至 右 依次 选择 “空白 页 ”>ASP VBScript>“ 无 ”( 无 框架 ) 选 项 ,然后 单 击 “ 创 建 ” 


按钮 新 建 一 个 以 VBScript 作为 脚本 的 ASP 文件 。 


(2) 执行 菜单 命令 “文件 ”>“ 保 存 ”, 打 开 “ 另 存 为 ”对话 框 ,如 图 8-2 所 示 。 从 图 中 可 


以 看 出 ,Dreamweaver 自动 将 文件 的 扩展 名 改 成 了 . asp ,选择 IIS“ 主 目录 ”选项 卡 “ 本 地 


路 径 ? 中 所 设置 的 路 径 ( 如 G:\myasp) ,输入 一 个 文件 名 (如 8-1. asp), 单 击 “ 保 存 ” 按 钮 


返回 。 


Unicode 标准 化 去 单 TD) 了 EBDERE 有 
回 包 括 Wnicode 签名 Co G) 


8-2 “另存 为 "对 话 框 


(3) 在 Dreamweaver 的 “代码 ”视图 中 编写 如 下 代码 : 


<%@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%> 
<html> 

<head> 

<title> 例 8-1</title> 

</head> 

<body> 

今天 是 : 

< 当 response .Write now()%> 

<br> 

从 现在 起 开始 学 习 动 态 网 页 设计 技术 -ASP。 
</body> 

</html> 


其 中 response. Write 表示 向 浏览 器 输出 ,now() 表 示 系 统 当前 日 期 和 时 间 。 
(4) 在 浏览 器 的 地 址 栏 中 输入 “http://localhost/8-1. asp”, 按 Enter 键 进 行 测 试 , 如 


图 8-3 所 示 。 
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BE] http://localhos8-1asp “| 好 | xX sing pr 
文件 用 “篇 强 (6) 查看 (V) 。 收 荆 夫 (A) 工具 (1 帮助 (H) 
误 ws 夫 Wl 站 
今天 是 ， 2010/9/27 9-49:50 h 
从 现在 起 开始 学 习 动态 网 页 设计 技术 -ASP。 
完成 多 本 地 Intranet | 保护 模式 : 禁用 种” 扫 100% ~ 


8-3 浏览 器 显示 效果 


(5) 在 浏览 器 中 执行 菜单 命令 “查看 ”一 “ 源 文件 ”, 如 图 8-4 所 示 , 从 中 可 以 看 出 ,在 
浏览 器 中 所 看 到 的 代码 和 ASP 文件 本 身 的 代码 是 不 一 样 的 , 即 验证 了 ASP 文件 是 在 服 
务 器 端 执行 后 再 生成 标准 的 HTML 文件 返回 给 客户 端的 。 


<html> 
<head> 
<title> 例 8-1</title> 


2010/9/27 9:49:50 


<br> 
从 现在 起 开始 学 习 动 态 网 页 设计 技术 -ASP。 


图 8-4 在 浏览 器 中 查看 源 文件 


8.3 VBScript 编程 基础 


VBScript 是 微软 公司 Visual Basic 的 简化 版 本 ,是 专门 为 浏览 器 进行 设计 的 ,是 
ASP 默认 的 脚本 引擎 ,多 用 在 服务 器 端 。 


8.3.1 VBScript 的 数据 类 型 


VBScript 中 只 有 一 种 数据 类 型 : Variant, 是 一 种 特殊 的 数据 类 型 ,可 以 用 来 包含 任 
何 的 数据 类 型 ,而且 函数 的 返回 值 也 是 这 个 类 型 。 


8.3.2 VBScript 的 常量 


所 谓 常 量 就 是 指 其 值 不 发 生 改 变 的 量 ,VBScript 中 可 以 使 用 const 声明 一 个 符号 常 
量 , 其 格式 如 下 : 
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const 符号 常量 名 = 常量 值 

例如 : 

const str1= "网 站 开发 与 网 页 设计 " 

1. 数值 常量 

表示 数值 的 常量 ,如 125、90. 55 等 。 

2. 字符 串 常 量 

用 双 引 号 括 起 来 的 内 容 , 如 "网 站 开发 与 网 页 设计 "、"730070" 等 。 如 果 要 在 字符 串 


中 使 用 引号 , 则 可 以 通过 单 引 号 或 两 个 双 引 号 来 实现 。 


3. 日 期 时 间 常 量 
日 期 时 间 型 常量 要 放 在 一 对 “# ”之 间 , 而 且 有 固定 的 格式 ,如 #2010/09/27#、 


#11: 25: 00 间 等 。 


4. 布尔 常量 

布尔 常量 也 叫 逻 辑 常 量 , 即 表示 真 \ 假 的 量 。 在 VBScript 中 用 true 和 false 来 表示 。 
8.3.3 ” VBScript 的 变量 

常量 是 指 在 程序 运行 过 程 中 其 值 可 以 发 生 改变 的 量 。 

1. 变量 的 命名 


(1) 变量 的 命名 要 见 名 知 义 ; 

(2) 变量 名 中 可 以 使 用 字符 或 数字 ,但 是 要 以 字母 开头 ; 

(3) 变量 名 不 区 分 大 小 写 ; 

(4) 变量 名 的 长 度 不 能 超过 255 个 字符 ; 

(5) 变量 名 不 能 和 VBScript 或 ASP 的 关键 字 重 名 ,如 不 能 使 用 ifor 等 作为 变 
名 。 


2. 变量 的 声明 
在 VBScript 中 ,变量 不 用 声明 可 以 直接 使 用 .但 是 强烈 建议 变量 先 声明 再 使 用 。 变 


量 的 声明 格式 如 下 : 


Dim 变量 名 1, 变量 名 2,… 
如 Dim datel 。 

3. 变量 的 赋值 

变量 赋值 的 格式 如 下 : 
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如 datel 王 井 2010/09/27 井 。 

8.3.4 ” VBScript 的 运算 符 与 表达 式 
VBScript 中 有 算术 运算 符 .比较 运算 符 、 连 接 运 算 符 和 逻辑 运算 符 。 
1. 算术 运算 符 


表 8-1 VBScript 的 算术 运算 符 


功能 说 明 
小 于 

小 于 等 于 

对 象 比较 引用 


表 8-3 VBScript 的 连接 运算 符 


功能 说 明 


表 8-4 VBScript 的 逻辑 运算 符 


运算 符 功能 说 明 
And 逻辑 异 或 
Or 人 逻辑 等 从 
Not 逻辑 隐 含 


5. 运算 符 的 优先 级 
算术 运算 符 一 连接 运算 符 一 比较 运算 符 一 逻辑 运算 符 。 
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6. 续 行 符 


当 VBScript 脚本 的 一 行 很 长 时 ,可 以 使 用 续 行 符 ”_”( 一 个 空格 和 一 个 下 划 线 ) 进 行 
换行 ,以 增强 程序 的 可 读 性 。 


7. 表达 式 
VBScript 的 表达 式 是 指 由 常量 .变量 .函数 和 运算 符 所 组 成 的 一 个 有 意义 的 式 子 。 


8.3.5 _ VBScript 的 控制 语句 


1. 分 支 语 名 


1) 诺 语句 
其 格式 如 下 : 


if 条 件 表 达 式 then 
语句 序列 1 

else 
语句 序列 2 


end if 


功能 说 明 : 如 果 条 件 表达 式 的 值 为 真 则 执行 语句 序列 1, 否 则 执行 语句 序列 2。 

【实例 8-2】 根据 系统 时 间 ,自动 显示 欢迎 词 。 如 果 时 间 在 6 点 和 18 点 之 间 则 显示 
“欢迎 您 ,白天 好 1”, 否 则 显示 “欢迎 您 ,晚上 好 1”(8-2. asp) 。 

程序 代码 如 下 : 


<%@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%$> 
< !DOCTYPE HTML PUBLIC "~-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3. 
org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>if 语 句 </title> 
</head> 
<body> 
< 
dim time hour 
time hour=hour (now) 
response .Write (now ()) 
if time hour>=6 and time hour<18 then 
response.Write(" 欢迎 您 ,白天 好 !") 
else 
response.Write(" 欢迎 您 ,晚上 好 !") 
end if 
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> 
</body> 
</html> 


浏览 器 显示 效果 如 图 8-5 和 图 8-6 所 示 。 


2010/9/27 19:4805 欢迎 您 ， 晚 上 好 ! 


久 本 地 Intranet | 保护 模式 : 禁用 


图 8-6 浏览 器 显示 效果 (2) 


2) select case 语句 


其 格式 如 下 : 


select case 表达 式 
case 条 件 值 Ek 
语句 序列 1 
case 条 件 值 2 
语句 序列 2 


case 条 件 值 
语句 序列 N 
case else 
语句 序列 N+1 
end Select 
功能 说 明 : 如 果 表达 式 的 值 与 条 件 值 1 相同 , 则 执行 语句 序列 1, 如 果 与 条 件 值 2 相 
同 , 则 执行 语句 序列 2, 依 次 类 推 ,如 果 表 达 式 的 值 与 任 一 个 条 件 值 都 不 相同 , 则 执行 语句 
序列 N 十 1。 
【实例 8-3】 根据 系统 时 间 ,自动 显示 欢迎 词 。 如 果 时 间 在 6 点 和 12 点 之 间 则 显示 
“欢迎 您 ,早上 好 1”; 在 12 点 和 18 点 之 间 则 显示 “欢迎 您 ,下 午 好 !1”; 在 18 点 和 0 点 之 间 
则 显示 “欢迎 您 ,晚上 好 1”; 在 0 点 和 6 点 之 间 则 显示 “欢迎 您 ,凌晨 好 1”(8-3. asp)。 
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程序 代码 如 下 : 


<%@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%> 
< IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3. 
org/TR/html4/loo0se.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> select case 语 句 </title> 
</head> 
<body> 
<% 
dim time hour 
time hour=hour (now) \6 
response .Write (now ()) 


select case time hour 


casel 

response.Write(" 欢迎 您 ,早上 好 !") 
case 2 

response.Write(" 欢迎 您 ,下 午 好 !") 
case 3 

response.Write(" 欢迎 您 ,晚上 好 !") 
case 0 


response.Write(" 欢迎 您 ,凌晨 好 !") 
end select 
各 > 
</body> 
</html> 


本 例 的 浏览 器 显示 效果 与 上 例 类 似 。 
2. 循环 语句 

1) do while loop 语句 

格式 一 : 


do while 条 件 表达 式 
语句 序列 
loop 
功能 说 明 : 当 条 件 表 达 式 的 值 为 真 时 ,重复 执行 语句 序列 ,否则 退出 循环 。 
格式 二 : 


do 
语句 序列 
loop while 条 件 表达 式 


功能 说 明 : 重复 执行 语句 序列 ,直到 条 件 表达 式 的 值 为 假 退出 循环 。 
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【实例 8-4】 连续 三 次 进行 单 击 确认 某 一 重要 操作 (8-4. asp) 。 
程序 代码 如 下 : 


<%@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%> 
< IDOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3. 
org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>do while loop 语 句 </title> 
</head> 
<body> 
< 多 
dim i,m count 
i=1 
m count=0 
do while i<=3 
response.Write("<script>alert (' 请 确认 !')</script>") 
i=i+1 


m count=m count+1 


loop 

response.Write ("您 一 共 确认 了 "gm_count&g" 次 。") 
和 > 
</body> 
</html> 


浏览 器 显示 效果 如 图 8-7 所 示 。 


图 8-7 浏览 器 显示 效果 


2) for 语句 
格式 一 : 
for 循环 变量 = 初 值 to 终止 值 step 步 长 
语句 序列 
next 
功能 说 明 : 循环 变量 在 满足 终止 值 的 情况 下 .反复 执行 语句 序列 。 每 执行 一 次 循环 ， 
循环 变量 加 上 一 个 步 长 (如 果 步 长 没有 指定 则 加 上 1)。 
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格式 二 : 


For each 元 素 in 集合 或 数组 
语句 序列 


next 


功能 说 明 : 对 集合 或 数组 中 的 每 一 个 元 素 执行 一 次 语句 序列 。 
【实例 8-5】 利用 for 循环 实现 显示 HTML 中 字体 大 小 示例 (8-5. asp) 。 
程序 代码 如 下 : 


<%@LANGUAGE= "VBSCRIPT" CODEPRGE="65001" 委 > 
<!1DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3. 
org/TR/html4/loo0se.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>for 语句 </title> 
</head> 
<body> 
<% 
dim fontsize 
for fontsize=1 to 7 
response.Write("<font size="&fontsize&">") 
response.Write(" 现 在 显示 的 是 : "gfontsizeg" 号 字体 大 小 。") 
response.Write("<br>") 
response.write("</font>") 
next 
$$> 
</body> 
</html> 


浏览 器 显示 效果 如 图 8-8 所 示 。 


B] httpy/localhost/8-5.asp ME G2E23 罗 绽 
文件 中” 骗 纺 (E) ”查看 (V) ”收音 夫 (A) 工具 (T) 帮助 (H) 
六 as 本 we | 
于 老 吧 条 的 是 ， 13: > 


字体 大 小- 
现在 显示 的 是 : 2 号 字体 大 小 。 

现在 显示 的 是 ，3 号 字体 大 小 。 
现在 显示 的 是 : 4 号 字体 大 小 。 


现在 显示 的 是 : 5 号 字体 大 小 。 
现在 显示 的 是 : 6 号 字体 大 小 。 


现在 显示 的 是 : 7 号 字体 大 小 。 


完成 久 本 地 Intranet | 保护 楼 式 : 禁用 各 了 有 100%6 ~ 


图 8-8 浏览 器 显示 效果 


236 


Musssarid 


8.3.6 VBScript 的 子 程序 与 函数 


VBScript 中 的 子 程序 和 函数 都 是 指 一 段 独立 的 具有 特定 功能 的 程序 ,其 区 别 在 于 子 


程序 无 返回 值 ,而 函数 具有 返回 值 。 


1. 子 程序 


1) 子 程序 的 定义 


Sub 子 程序 名 (形式 参数 列表 ) 
程序 段 


end sub 


2) 子 程序 的 调用 
call 子 程序 名 (实际 参数 列表 ) 


2. 函数 

1) 函数 的 定义 

function 函数 名 (形式 参数 列表 ) 
程序 段 
函数 名 = 表达 式 


end function 


2) 函数 的 调用 
函数 名 (实际 参数 列表 ) 


【实例 8-6】 利用 for 循环 和 子 程序 的 方法 显示 HTML 中 字体 大 小 示例 (8-6. asp) 。 
程序 代码 如 下 : 


<%@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%> 
< I!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3. 
org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 子 程序 < /title> 
</head> 
<body> 
< 
sub outputfontsize(fs) 
response.Write("<font size="&fs&">") 
response.Write ("现在 显示 的 是 : "gfsg" 号 字体 大 小 。") 


response.Write("<br>") 
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response.write("</font>") 
end sub 
dim fontsize 
for fontsize=1 to 7 
outputfontsize (fontsize) 
next 
> 
</body> 
</html> 


3. VBScript 的 内 部 函数 


VBScript 本 身 带 有 大 量 的 函数 ,叫做 内 部 函数 ,这 些 函 数 可 以 直接 引用 。 如 果 用 户 
需要 , 则 可 以 在 Internet 上 查找 或 查看 相关 的 书籍 。 


8.4 ASP 的 内 置 对 和 聚 


ASP 为 用 户 提供 了 6 个 非常 实用 并 且 功 能 强大 的 内 置 对 象 。 使 用 这 些 对 象 ,可 以 方 
便 地 实现 动态 网 页 设计 中 的 交互 功能 ,如 收集 客户 端 浏览 器 发 送 过 来 的 信息 、 将 信息 回 
传 给 客户 端 浏览 器 获取 Web 服务 器 中 的 相关 信息 、 存 储 用 户 信 息 、 进 行 分 布 式 事务 处 
ASP 的 6 个 内 置 对 象 分 别 是 Request、 Response、 Session、Application、Server 和 Object 


Context。 


8.4.1 Request 对象 


1. 语法 格式 


Request[. 集 合 | 属 性 | 方法 ] (变量 ) 


2. 功能 说 明 


Request 对 象 的 主要 功能 是 客户 端 通过 浏览 器 请 求 HTTP 服务 时 ,负责 收集 从 客户 
端 浏览 器 传递 给 服务 器 的 信息 。 如 通过 HTML 表单 用 GET 或 POST 方法 传递 的 参数 、 
Cookies 中 的 信息 和 用 户 认证 信息 等 。 


3. 集合 .属性 和 方法 


Request 对 象 的 集合 、 属 性 和 方法 分 别 如 表 8-5、 表 8-6 和 表 8-7 所 示 。 
【实例 8-7】 利用 Request 对 象 的 ServerVariables 集合 获取 客户 端 和 服务 器 的 一 些 
信息 (8-7. asp)。 
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表 8-5 Request 对象 的 集合 


集合 功能 说 明 
Cookies HTTP 请 求 中 发 送 的 所 有 Cookie 值 
Form 使 用 Post 方 法 由 表单 发 送 的 所 有 的 输入 值 
QueryString HTTP 查询 字符 串 中 所 有 的 变量 值 
ServerVariables 客户 端 或 服务 器 中 的 一 些 变 量 的 值 
ClientCertificate 存储 于 客户 证 书 中 的 值 


表 8-6 ”Request 对 象 的 属性 
属 性 功能 说 明 
TotalBytes 返回 在 请 求 中 客户 端 所 发 送 的 字 节 总 数量 


表 8-7 Request 对象 的 方法 
方 法 功能 说 明 


获取 作为 post 请 求 的 一 部 分 而 从 客户 端 送 往 服 务 器 的 数据 ,并 


Ce 把 它 存放 到 一 个 安全 的 数组 之 中 


程序 代码 如 下 : 


<%@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%> 
<!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3. 
org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<tilte> 
</title> 
<title> 获 取 客 户 端 和 服务 器 信息 </title> 
</head> 
<body> 
<h3> 以 下 是 客户 端 和 服务 器 的 一 些 信息 : < /h3> 
<p> 浏 览 器 信息 : 
<%Response.Write (Request .ServerVariables ("http user agent"))%®> 
</p> 
<p>IP 地 址 : 
<%Response.Write (Request .ServerVariables ("remote addr"))%> 
</p> 
<p>DNS: 
<%Response.Write (Request .ServerVariables ("remote host"))%> 
</p> 
<p> 所 用 的 方法 : 
<%Response.Write (Request .ServerVariables ("request method"))$%> 


</p> 
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<p> 服 务 器 的 域名 : 

<$%Response.Write (Request .ServerVariables ("server name"))%®%> 
</p> 
<p> 服 务 器 的 端口 : 

<%$Response.Write (Request .ServerVariables ("server port"))%> 
</p> 
<p> 服 务 器 的 软件 : 

<%Response.Write (Request .ServerVariables ("server software"))®%> 
</p> 
</body> 
</html> 


浏览 器 显示 效果 如 图 8-9 所 示 。 


以 下 是 客户 端 和 服务 器 的 一 些 信息 : 


浏览 器 信息 ， Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; NET CLR 2.0.50727; NET 
CLR 3.5.30729; NET CLR 3.0.30729; Media Center PC 6.0; NET CLR 1.1.4322; CIBA) 


卫 地 址 ， 1270.041 


DNS: 127.00.1 
所 用 的 方法 ，GET 
服务 器 的 域名 ， 127.0.0.1 
服务 器 的 端口 ，80 
服务 器 的 软件 ， Microsof-IIS/7.5 


【实例 8-8】 利用 Request 对 象 的 QueryString 集合 获取 用 户 单 击 超 链接 的 信息 
(8-8. asp)。 
程序 代码 如 下 : 


<%@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%> 

< !DOCTYPE html] PUBLIC "~-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>Querystring 的 使 用 < /title> 

</head> 

<body> 

<center> 

<h3> 北 京 奥运 会 五 个 吉祥 物 中 ,您 最 喜欢 哪 一 个 ?请 选择 !</h3> 


<hr/> 
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<a href="8-8.asp?fuwa= 福 娃 贝 贝 "> 福娃 贝 贝 </a><br/> 
<a href="8-8.asp?fuwa= 福 娃 晶 晶 "> 福 娃 晶 晶 </a><br/> 
<a href="8- 8.asp? fuwa= 福 娃 欢 欢 "> 福娃 欢 欢 </a><br/> 
<a href="8- 8.asp? fuwa= 福 娃 迎 迎 "> 福 娃 迎 迎 </a><br/> 
<a href="8- 8.asp? fuwa= 福 娃 妮 妮 "> 福 娃 妮 妮 </a><br/> 
<hr/> 

您 的 选择 是 : 

<%Response.Write (Request .QueryString ("fuwa"))®s> 
</center> 

</body> 

</html> 


浏览 器 最 初 显示 效果 如 图 8-10 所 示 , 当 单 击 某 一 超 链接 时 (如 “福娃 欢 欢 ”) 浏 览 器 显 
示 效 果 如 图 8-11 所 示 。 


WueryString 的 人 


ee wo oe | 


文件 (F) 忽 纺 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


图 8-10 浏览 器 显示 效果 


四 htpy/127.0.0.18-8asp?fuwa= 生 EMKKX ~| 分 | X 用 由 Bing Pp- 
文件 (。 编 吕 6。 埋 看 (V)。 收 茂 夫 (A) 工具 (T) 帮助 (H) 
突 收 天 | 臣 Querystring 的 使 用 | 


北京 奥运 会 五 个 吉祥 物 中 ， 您 最 喜欢 哪 一 个 ? 请 选择 ! 


您 的 选择 是 ， 福娃 欢 欢 
图 Internet | 保护 楼 式 . 要 用 三 = 忌 100% ~ 


8-11 浏览 器 显示 效果 
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8.4.2 Response 对 象 


1. 语法 格式 


Response[. 集 合 | 属 性 | 方法 ] 


2. 功能 说 明 


Response 对 象 的 主要 功能 是 响应 客户 端 请 求 , 并 且 将 响应 信息 返回 到 客户 端 浏 览 器 
中 ,也 可 以 用 来 设置 Cookies 的 值 和 实现 浏览 器 重 定位 等 。 
Request 和 Response 正好 实现 了 服务 器 和 客户 端 之 间接 收 和 发 送 数据 的 功能 ,从 而 


实现 了 基本 的 交互 性 能 。 
3. 集合 、 属 性 和 方法 


Response 对 象 的 集合 .属性 和 方法 分 别 如 表 8-8、 表 8-9 和 表 8-10 所 示 。 


集 合 


Cookies 


属 性 
Buffer 
CacheControl 
Charset 
ContentType 
Expires 
Expires Absolute 


IsClientConnected 


表 8-8 ”Response 对 象 的 集合 
功能 说 明 
设置 Cookies 的 值 ,如 果 变 量 不 存在 , 则 自动 创建 


表 8-9 Response 对 象 的 属性 


功能 说 明 
设置 是 否 缓存 页 面 的 输出 
设置 代理 服务 器 是 否 可 以 缓存 由 ASP 产生 的 输出 
将 字符 集 的 名 称 追 加 到 Response 对 象 中 的 content-type 的 报头 
设置 Response 对 象 的 HTTP 内 容 类 型 
设置 页 面 在 失效 前 的 浏览 器 缓存 时 间 ( 单 位 : min) 
设置 浏览 器 上 页 面 缓存 失效 的 日 期 和 时 间 
判断 客户 端 是 否 已 从 服务 器 已 断 开 


Pics 向 Response 报头 的 PICS 标志 
Status 设置 由 服务 器 返回 的 状态 行 的 值 
表 8-10 Response 对 象 的 方法 
方 法 功能 说 明 
Write 向 客户 端 输出 指定 的 字符 串 
Redirect 把 用 户 浏览 器 重 定向 到 另 一 个 URL 
AddHeader 向 HTTP 响应 添加 新 的 HTTP 报头 和 值 
AppendToLog 向 服务 器 记录 的 末端 添加 相应 的 字符 串 
BinaryW rite 在 没有 任何 字符 转换 的 情况 下 直接 向 浏览 器 输出 数据 
Clear 清除 已 缓存 的 HTML 输出 
End 停止 处 理 脚 本 ,并 且 返 回 当 前 结果 
Flush 立即 发 送 已 缓存 的 数据 
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【实例 8-9】 Response 对 象 示例 (8-9. asp) 。 
程序 代码 如 下 : 


<$%@LANGUAGE= "VBSCRIPT" CODEPRGE="65001" 委 > 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional.dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>Response 对 象 示例 </title> 
</head> 
<body> 
<p> 
<% 
if Request .Form("liti")<>"" then 
Response.Redirect (Request .Form("liti")) 
end if 
和 > 
<% 
Response.Write ("这 是 Response 直接 输出 文本 信息 。") 
Response .Write ("<br>") 
Response .Write ("<font size='5' color='blue'> 这 是 Response 输出 HTML 格式 化 文本 。 
</font>") 
Response .Write ("<hr>") 
和 > 
</p> 
<form id="forml" name= "forml" method= "post" action="8-9.asp"> 
<label> 
<input type="radio" name= "liti" id="radio" value="8-7.asp"/> 
例 8-7.asp<br/> 
<input type="radio" name= "liti" id="radio" value="8-8.asp"/> 
例 8-8 .asp 
<br/> 
<input type="submit" name="button" id="button" value=" 当 前 页 面 执 行 完毕 , 单 击 
将 跳 转 到 所 选择 的 页 面 。"/> 
</label> 
</form> 
</body> 
</html> 


浏览 器 显示 效果 如 图 8-12 所 示 。 


8.4.3 Application 对 象 


1. 语法 格式 


Application[ .集合 | 方 法 ] 
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BB] htpy/127001/8-9asp “| 好 | x ang 及 
文件 (有希 名 (E) 喜 看 V) 履 训 夫 (A】 工具] 帮助 (H) 
请 收 训 夫 起 Response 示 网 | 


这 是 Response 直 接 输出 文本 信息 。 
这 是 Response 输 出 HTML 格式 化 文本 。 


asp 
[当前 页 而 执 行 完毕 ， 单 击 振 跌 转 到 所 这 页 面 。 | 


完成 图 Internet | 保护 模式 : 禁用 请” 我 100% ~ 


8-12 浏览 器 显示 效果 


2. 功能 说 明 


Application 对 象 用 来 存储 应 用 程序 (为 完成 某 一 任务 而 协同 工作 的 多 个 ASP 文件 ) 
中 所 有 用 户 之 间 的 共享 信息 ,并 且 在 应 用 程序 运行 期 间 将 持续 保存 这 些 数 据 信 息 。 


3. 集合 、 方 法 和 事件 
Application 对 象 的 集合 ,方法 和 事件 分 别 如 表 8-11、 表 8-12 和 表 8-13 所 示 。 


表 8-11 Application 对 象 的 集合 


集 合 功能 说 明 
Contents 存储 所 有 通过 脚本 命令 即 没有 使 用 HTML 的 二 Object 二 标记 定义 的 变量 
StaticObjects 存储 所 有 使 用 HTML 的 一 object 二 标记 定义 的 变量 
表 8-12 ”Application 对 象 的 方法 
方 法 功能 说 明 


Contents. Remove 


表示 从 Contents 集合 中 删除 一 个 变量 
表示 从 Contents 集合 中 删除 所 有 的 变量 


Contents. RemoveAll 


Lock 加 锁 操 作 ,防止 其 余 用 户 同时 修改 Application 对 象 中 的 变量 
Unlock 开锁 操作 ,允许 其 他 的 用 户 可 以 修改 Application 对 象 中 的 变量 
表 8-13 Application 对 象 的 事件 
事 件 功能 说 明 


Application_OnEnd 当 所 有 用 户 的 Session 对 象 都 结束 ,并 且 应 用 程序 结束 时 ,此 事件 发 生 


第 一 个 Session 对 象 被 创建 之 前 而 Application 对 象 被 第 一 次 引用 时 ,此 
事件 会 发 生 


Application_OnStart 


【实例 8-10】 最 简单 的 页 面 访问 计数 器 ,重新 打开 本 页 面 一 次 或 刷新 一 次 ,计数 器 
的 值 将 加 1(8-10. asp)。 
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程序 代码 如 下 : 


<%$@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%> 

< !IDOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional .dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title> 访 问 计 数 器 < /title> 

</head> 

<body> 

<center> 

<% 

Application.Lock () 

Application("visit count")=Application("visit count")+1 
Application.UnLock() 

Response.Write ("当前 页 面 被 访问 了 : ") 

Response .Write (Application ("visit count")) 

Response .Write(" 次 。") 

和 > 

</center> 

</body> 

</html> 


浏览 器 显示 效果 如 图 8-13 所 示 。 


当前 页 面 被 访问 了 :8 次 。 


8-13 浏览 器 显示 效果 


8.4.4 _ Session 对 象 


1. 语法 格式 

Session[. 集 合 | 属性 | 方法 ] 

2. 功能 说 明 

Session 对 象 用 来 在 应 用 程序 中 为 不 同 的 用 户 存储 不 同 的 信息 ,并 且 在 应 用 程序 运 
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行 期 间 将 持续 保存 这 些 数 据 信息 。Session 对 象 主要 用 来 跟踪 用 户 在 网 页 中 的 访问 信息 
和 访问 习惯 ,如 购物 车 系统 中 就 使 用 了 Session 对 象 。 


3. 集合 、 属 性 、 方 法 和 事件 
Session 对 象 的 集合 、 属 性 方法 和 事件 分 别 如 表 8-14、 表 8-15、 表 8-16 和 表 8-17 所 示 。 
表 8-14 Session 对 象 的 集合 


集 合 功能 说 明 
Contents 存储 所 有 通过 脚本 命令 即 没有 使 用 HTML 的 二 Object 二 标记 定义 的 变量 
StaticObjects 存储 所 有 使 用 HTML 的 二 object 二 标记 定义 的 变量 


表 8-15 Session 对 象 的 属性 


属 性 功能 说 明 
CodePage 设置 在 浏览 器 中 显示 内 容 的 代码 页 
LCID 设置 发 送 给 浏览 器 的 页 面 唯一 地 区 标识 符 
SessionID 为 每 个 用 户 设置 一 个 唯一 的 人 D, 此 ID 由 服务 器 生成 ,并 且 是 一 个 不 重复 的 长 整数 


设置 应 用 程序 中 Session 对 象 的 超时 时 间 ( 单 位 : 分 钟 )。 如 果 超 时 , 则 本 Session 
自动 结束 


Timeout 


表 8-16 Session 对象 的 方法 
功能 说 明 
撤销 一 个 用 户 的 Session ,并 且 释放 对 象 的 资源 
从 Contents 集合 中 删除 一 个 变量 
从 Contents 集合 中 删除 所 有 变量 


让 法 
Abandon 


Contents. Remove 


Contents. RemoveAll 


表 8-17 Session 对 象 的 事件 


事 件 
Session_OnEnd 


功能 说 明 
当 一 个 会 话 结束 时 此 事件 发 生 
当 一 个 会 话 创建 时 此 事件 发 生 


Session_OnStart 


8.4.5 ”Server 对 象 


1. 语法 格式 


Server[. 属 性 | 方法 ] 


2. 功能 说 明 


Server 对 象 主要 用 来 实现 对 服务 器 的 访问 和 控制 。 如 存 取 文 件 . 与 数据 库 建 立 连 
接 、 设 置 脚本 的 超时 时 间 等 。 
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3. 属性 和 方法 
Server 对 象 的 属性 和 方法 分 别 如 表 8-18 和 表 8-19 所 示 。 
表 8-18 Server 对 象 的 属性 


功能 说 明 
设置 脚本 可 以 运行 的 最 多 时 间 ( 单 位 : s) 


属 性 


ScriptTimeout 


表 8-19 ”Server 对 象 的 方法 


方 法 功能 说 明 
CreateObject 创建 一 个 ActiveX 组 件 的 实例 
Execute 执行 一 个 其 他 ASP 文件 中 的 程序 
Transfer 将 一 个 ASP 文件 中 的 所 有 信息 发 送 给 另 一 个 ASP 文件 


获取 已 发 生 错误 的 ASPError 对 象 


GetLastError 


HTMLEncode 将 HTML 编码 应 用 到 某 个 特定 的 字符 串 中 
MapPath 获取 一 个 虚拟 路 径 在 服务 器 上 的 真实 物理 路 径 
URLEncode 把 URL 编码 规则 应 用 到 特定 的 字符 串 中 


8.4.6 ObjectContext 对 象 
1. 语法 格式 
ObjectCcontext .方法 


2. 功能 说 明 


ObjectContext 对 象 可 以 与 MTS(Microsoft Transaction Server) 配 合 进行 事务 的 处 
理 ,可 以 提交 或 撤销 由 ASP 脚本 初始 化 的 事务 。 


3. 方法 和 事件 
ObjectContext 对 象 的 方法 和 事件 分 别 如 表 8-20 和 表 8-21 所 示 。 


表 8-20 ”ObjectContext 对 象 的 方法 


方 法 功能 说 明 
SetComplete 如 果 事 务 中 的 所 有 组 件 都 调用 SetComplete, 则 事务 将 完成 
SetAbort 被 脚本 初始 化 的 事务 未 完成 ,无 法 更 新 资源 


8.4.7 Global.asa 文件 


1. Global. asa 文件 简介 
Global. asa 文件 的 主要 功能 是 定义 Application 对 象 和 Session 对 象 的 事件 所 对 应 
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表 8-21 ObjectContext 对 象 的 事件 


事 件 功能 说 明 


OnTransactionCommit 事件 在 一 个 已 处 理 的 脚本 事务 提交 后 发 生 。 
OnTransactionCommit | OnTransactionCommit 事件 发 生 时 ,如 果 脚 本 中 有 OnTransactionCommit 
子 程序 ,IIS 将 处 理 该 子 程序 


如 果 事 务 异 常 终 止 , 就 会 发生 OnTransactionAbort 事 件 。 当 
OnTransactionAbort OnTransactionAbort 事件 发 生 时 ,如 果 脚 本 中 有 OnTransactionAbort 子 程 
序 , 则 IIS 执行 它 


的 程序 , 当 Application 对 象 或 Session 对 象 第 一 次 被 调用 时 或 调用 结束 时 ,将 执行 
Global. asa 文件 中 所 对 应 的 程序 模块 。 在 使 用 时 ,以 下 几 点 需要 注意 : 

(1) Global. asa 文件 的 文件 名 必须 是 Global. asa。 

(2) Global. asa 文件 是 一 个 文本 文件 。 

(3) Global. asa 文件 必须 放 在 网 站 物理 路 径 的 根 目录 下 。 

(4) 网 站 物理 路 径 的 根 目录 下 .Global. asa 文件 必须 唯一 。 

(5) 如 果 没 有 必要 , 则 Global. asa 文件 也 可 以 不 用 。 

(6) Global. asa 文件 的 脚本 在 书写 时 ,不 用 加 "二 %” 和 “% 二 ”符号 。 

(7) Global. asa 文件 的 脚本 中 不 能 有 输出 语句 。 


2. Global. asa 文件 的 格式 
Global. asa 文件 具有 相对 固定 的 格式 ,其 一 般 格式 如 下 : 


<script language= "vbscript" runat="server"> 

sub Application Onstart 
程序 模块 1 

end sub 

sub Application OnEnd 
程序 模块 2 

end sub 

sub Session Onstart 
程序 模块 3 

end sub 

sub Session OnEnd 
程序 模块 4 

end sub 


</script> 

【实例 8-11】 对 【实例 8-10】 进 行 改进 ,设置 计数 器 的 初始 值 为 1000, 这 样 当 第 一 个 
用 户 访问 此 页 面 时 ,计数 器 就 会 变 为 1001(Global. asa) 。 

程序 “8-10. asp” 的 代码 不 变 ,而 Global. asa 文件 的 代码 如 下 : 


<script language= "vbscript" runat="server"> 
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sub Application Onstart 
Application("visit count")=1000 

end sub 

sub Application OnEnd 

end sub 

sub Session Onstart 

end sub 

sub Session OnEnd 

end sub 


</script> 
浏览 器 显示 效果 如 图 8-14 所 示 。 


ec 


Ce /zoove toasp -| xlea ?| 


图 8-14 浏览 器 显示 效果 


8.5 ASP 的 这 用 组 件 


ActiveX 组 件 是 一 组 存放 在 Web 服务 器 上 的 文件 ,由 专业 开发 人 员 针 对 某 一 应 用 需 
求 或 功能 而 开发 的 程序 ,用 户 可 以 直接 在 ASP 程序 中 进行 引用 ,增加 了 应 用 程序 的 功 
能 ,提高 了 开发 效率 。 

ActiveX 组 件 的 文件 一 般 表现 为 . dll、. exe、. ocx 等 形式 ,可 以 通过 以 下 几 种 方式 去 
获取 : 

(1) ASP 自 带 的 内 置 组 件 ,安装 配置 好 IIS 后 就 可 以 直接 使 用 .如 数据 库 访问 组 件 
DatabaseAccess 等 。 

(2) 下 载 (免费 ) 或 购买 (收费 ) 第 三 方 的 组 件 .如 文件 上 传 组 件 、 邮 件 发 送 组 件 等 。 

(3) 用 户 自己 针对 某 一 功能 进行 开发 的 组 件 。 

需要 提醒 的 是 : 下 载 或 购买 第 三 方 的 组 件 以 及 用 户 自己 针对 某 一 功能 进行 开发 的 组 
件 在 使 用 前 需要 进行 安装 注册 ,才能 正常 使 用 。 
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8.5.1 AdRotator 组 件 


1. 功能 说 明 


AdRotator 组 件 , 也 叫 广告 轮 显 组 件 , 其 主要 功能 是 每 当 用 户 进入 页 面 或 刷新 页 面 
时 ,AdRotator 组 件 就 会 创建 一 个 AdRotator 对 象 来 显示 一 幅 不 同 的 图 片 , 多 用 于 广告 的 


2. 语法 格式 


< 
set adrotator=server.createobject ("MSWC.AdRotator") 
adrotator.GetAdvertisement ("文本 文件 名 .txt") 


和 > 


其 中 “文本 文件 . txt" 内 容 的 格式 如 下 所 示 : 


图 像 文 件 1 

对 应 的 链接 地 址 1 
描述 1 

显示 频率 1 


图 像 文件 2 

对 应 的 链接 地 址 2 
描述 2 

显示 频率 2 


3. 属性 和 方法 
AdRotator 组 件 的 属性 和 方法 分 别 如 表 8-22 和 表 8-23 所 示 。 
表 8-22 AdRotator 组 件 的 属性 


属 性 功能 说 明 
Border 设置 广告 图 片 边框 的 粗细 
Clickable 设置 广告 图 片 是 否 带 有 超 链 接 
TargetFrame 设置 单 击 广告 图 片 超 链接 时 在 浏览 器 中 的 显示 方式 
表 8-23 AdRotator 组 件 的 方法 
方 法 功能 说 明 
GetAdvertisement 获取 在 页 面 中 显示 广告 图 片 的 HTML 代码 


【实例 8-12】 利用 AdRotator 组 件 设计 一 个 显示 北京 奥运 会 吉祥 物 五 个 福娃 的 广 
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告 系统 (8-12. asp) 。 
(1) 从 网 上 搜索 下 载 AdRotator 组 件 的 文件 (Adrot. dll) 。 
(2) 将 Adrot. dll 文件 复制 到 系统 所 在 分 区 的 windows\system 文件 夹 中 。 
(3) 在 “运行 ”文本 框 中 输入 “regsvr32 adrot. dll” 并 且 按 回 车 。 
(4) 8-12. asp 文件 的 代码 如 下 : 


<%@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%> 
<!DOCTYPE htm1l PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
Org/TR/xhtml1/DTD/xhtmll- transitional .dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title> 福 娃 广 告 < /title> 
</head> 
<body> 
<center> 
< 
set adrotator=Server.CreateObject ("MSWC.AdRotator") 
Response.Write (adrotator.GetAdvertisement ("ad.txt")) 
$%> 
</center> 
</body> 
</html> 


(5) 将 福娃 广告 图 片 复制 到 网 站 根 目录 下 的 "adimages” 文 件 夹 中 。 
(6) ad. txt 文件 的 内 容 如 下 : 


WIDTH 100 

HEIGHT 100 

BORDER 1 
/adimages/fwbb.jpg 
# 

福娃 贝 贝 

20 
/adimages/fwjj.jpg 
# 

福娃 晶 唱 

20 
/adimages/fwhh.jpg 
# 

福娃 欢 欢 

20 
/adimages/fwyy.jpg 
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# 

福娃 迎 迎 

20 
/adimages/fwnn.jpg 
# 

福娃 妮 妮 

20 


(7) 浏览 器 测试 效果 如 图 8-15 所 示 ,其 中 五 张 图 片 是 随机 显示 的 。 


EX 


目 htpyhlocaihosvslzasp “|9|xja ?| 


8-15 浏览 器 显示 效果 


8.5.2 ContentRotator 组 件 


1. 功能 说 明 


ContentRotator 组 件 也 叫 内 容 轮 显 组 件 , 其 主要 功能 是 每 当 用 户 访问 页 面 或 者 刷新 
页 面 时 ,该 组 件 就 会 显示 不 同 的 HTML 内 容 字符 串 。 


2. 语法 格式 


<% 

set cr=server.createobject ("MSWC.ContentRotator") 
response.write (cr.ChooseContent ("文本 文件 名 .txt ")) 
多 > 

其 中 “文本 文件 .txt” 内 容 的 格式 如 下 所 示 : 

gg# 显示 几率 1 

信息 1 


gg%# 显示 几率 2 
信息 2 


gg&# 显示 几率 3 
信息 3 
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3. 方法 


ContentRotator 组 件 的 方法 如 表 8-24 所 示 。 
表 8-24 ContentRotator 组 件 的 方法 
功能 说 明 


显示 文本 文件 中 的 某 个 字符 串 
显示 文本 文件 中 的 所 有 字符 串 


方 法 


ChooseContent 


GetAllContent 


8.5.3 ”BrowserCapabilities 组 件 


1. 功能 说 明 


BrowserCapabilities 组 件 的 主要 功能 是 获取 客户 端 浏览 器 的 信息 ,如 浏览 器 的 类 型 
和 版 本 号 等 。 


2. 语法 格式 


< 各 
Set MyBrow= Server.CreateObject ("MSWC.BrowserType") 


$> 


8.5.4 ContentLinking 组 件 


1. 功能 说 明 

ContentLinking 组 件 的 主要 功能 是 建立 一 个 快捷 便利 的 导航 系统 ,实现 在 页 面 间 进 
行 快 速 导 航 。 

2. 语法 格式 


< 
Set nl=Server.CreateObject ("MSWC .NextLink") 


3. 方法 
ContentLinking 组 件 的 方法 如 表 8-25 所 示 。 
8.5.5 其 他 组 件 简介 


1. FileAccess 组 件 


FileAccess 组 件 主 要 用 来 对 Web 服务 器 中 的 文件 系统 进行 访问 和 控制 .可 以 获取 
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表 8-25 ”ContentLinking 组 件 的 方法 


方 ” 法 功能 说 明 


返回 链接 列表 中 所 列 项 目的 总 数 


返回 在 链接 列表 中 当前 文件 的 索引 号 。 第 一 个 条 目的 索引 号 是 
1。 如 果 当 前 页 面 不 在 列表 中 , 则 返回 0 


返回 在 链接 列表 中 所 列 的 下 一 个 条 目的 文本 描述 。 如 果 在 列表 
中 没有 找到 当前 文件 , 则 返回 列表 中 最 后 一 个 页 面 的 文本 描述 


返回 在 链接 列表 中 所 列 的 下 一 个 条 目的 URL。 如 果 在 列表 中 没 
有 找到 当前 文件 , 则 返回 列表 中 最 后 一 个 页 面 的 URL 


返回 在 链接 列表 中 所 列 的 第 N 个 页 面 的 描述 信息 


GetListCount 


GetListIndex 


GetNextDescription 


GetNextURL 


GetNthDescription 
GetNthURL 返回 在 链接 列表 中 所 列 的 第 N 个 页 面 的 URL 


返回 在 链接 列表 中 所 列 前 一 个 条 目的 文本 描述 。 如 果 在 列表 文 
件 中 没有 找到 当前 文件 , 则 返回 列表 中 第 一 个 页 面 的 文本 描述 
返回 在 链接 列表 中 所 列 前 一 个 条 目的 URL。 如 果 在 列表 文件 中 
没有 找到 当前 文件 , 则 返回 列表 中 第 一 个 页 面 的 URL 


GetPreviousDescription 


GetPreviousURL 


文件 系统 的 信息 ,进行 文件 文件 夹 的 操作 等 。 
2. Counters 组 件 
Counters 组 件 主要 用 来 为 网 站 或 网 站 的 某 个 网 页 创建 一 个 或 多 个 计数 器 。 
3. DatabaseAccess 组 件 


DatabaseAccess 组 件 是 一 个 比较 常用 的 组 件 ,也 是 IIS 自 带 的 一 个 组 件 , 用 来 实现 对 
数据 库 的 访问 和 控制 。 


8.6 本 章 小 结 


由 于 ASP 简单 易学 .方便 开发 、 功 能 强大 ,并 且 在 Internet 上 已 有 大 量 的 ASP 源 
码 程序 可 以 下 载 使 用 ,所 以 得 到 了 广泛 的 应 用 :本 章 主 要 介绍 了 ASP 的 一 些 基 本 
知识 。 

本 章 首 先 对 ASP 的 运行 与 开发 环境 进行 了 介绍 ,接着 简单 介绍 了 ASP 的 基本 语法 
规则 ,并 且 附 加 了 一 个 ASP 的 实例 。 然 后 对 ASP 的 默认 脚本 VBScript 进行 了 系统 的 叙 
述 , 最 后 详细 介绍 了 ASP 的 内 置 对 象 和 常用 组 件 。 

虽然 ASP 只 有 6 个 内 置 对 象 ,常用 的 组 件 也 不 多 ,但 是 每 个 对 象 或 组 件 都 有 许多 的 
集合 、 属 性 方法 或 事件 ,需要 在 实践 中 逐步 去 掌握 和 熟悉 。 
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8.7 习 是 

一 、 填 空 题 

1. ASP 是 公司 开发 的 一 种 服务 器 端 脚 本 编写 环境 ,可 以 用 来 创建 和 运行 
动态 网 页 或 Web 应 用 程序 。 

2. ASP 是 一 种 动态 网 站 制作 技术 ,所 制作 网 页 的 文件 扩展 名 为 g 

3. ASP 中 的 注释 符号 是 

4. VBScript 的 日 期 时 间 型 常量 要 放 在 一 对 符号 之 间 , 而 且 有 固定 的 格式 。 

5. VBScript 的 续 行 符 为 , 续 行 符 的 使 用 可 以 增强 程序 的 可 读 性 。 

二 、 简 答 及 实 训 题 


1. ASP 可 以 使 用 两 种 脚本 引擎 , 即 VBScript 和 JavaScript。 请 问 它 们 有 哪些 异同 ? 
2. VBScript 的 变量 命名 需要 注意 些 什么 ? 

3. 请 说 明 ASP 中 Request 和 Response 两 个 内 置 对 象 的 主要 功能 。 

4. 编写 ASP 代码 实现 读 取 文 本 文件 内 容 。 

5. 编写 ASP 代码 实现 通过 表单 创建 Word 文档 。 
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通过 应 用 ASP 的 内 置 对 象 和 常用 组 件 基 本 上 已 经 实现 了 动态 网 站 设计 中 的 交互 功 
能 。 但 是 在 许多 情况 下 ,需要 将 收集 的 用 户 信息 存储 下 来 ,以 便 进一步 加 工 处 理 或 经 常 
显示 在 网 页 中 ,如 新 闻 系 统 、 调 查 系 统 、 留 言 板 、 论 坛 、 购 物 系统 ,等 等 。 

数据 库 技术 是 动态 网 站 建设 的 重要 内 容 ,可 以 用 来 实现 上 述 的 功能 。 本 章 主要 以 
Access 数据 库 为 基础 ,介绍 如 何 通 过 ASP 对 数据 库 进行 访问 和 控制 。 


9.1 数据 库 基 础 知 职 


1. 数据 库 


数据 库 (Database, 简 称 DB) , 即 存储 数据 的 仓库 。 是 长 期 存储 在 计算 机 中 有 组 织 的 、 
可 为 多 个 用 户 共享 的 ,与 应 用 程序 相对 独立 的 数据 的 有 机 集合 。 


2. 数据 库 的 特点 


(1) 数据 的 结构 化 , 即 按照 一 定 的 模型 进行 组 织 、 描 述 和 存储 ; 
(2) 具有 较 高 的 独立 性 ; 

(3) 容易 扩展 ; 

(4) 具有 较 小 的 宛 余 度 ; 

(5) 为 用 户 提供 共享 。 


3. 数据 模型 


数据 库 中 的 数据 是 结构 化 的 ,也 就 是 说 按照 一 定 的 数据 模型 来 组 织 的 。 常 用 的 数据 
模型 有 层次 模型 .网 状 模型 和 关系 模型 三 类 。 

(1) 层次 模型 : 用 树 状 结构 表示 数据 及 其 之 间 联 系 的 数据 模型 ,也 是 最 早出 现 的 一 
种 数据 模型 ,如 图 9-1 所 示 。 

其 特点 是 每 个 非 根 结 点 有 且 仅 有 一 个 父 结 点 。 

(2) 网 状 模型 : 用 网 络 结构 表示 数据 及 其 之 间 联 系 的 数据 模型 ,如 图 9-2 所 示 。 

其 特点 是 有 一 个 以 上 的 结 点 无 父 结 点 :至 少 有 一 个 结 点 有 多 于 一 个 的 父 结 点 。 
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图 9-1 层次 模型 图 9-2 网 状 模型 


(3) 关系 模型 : 用 二 维 表格 的 形式 表示 数据 及 其 之 间 的 联系 ,如 图 9-3 所 示 。 


学 号 姓名 ， 性别 年龄 籍贯 专业 
201003001 ， 姜 辽 辽 男 陇南 
201003002 范 超 男 19 兰州 _ 软件 工程 


201003003 | 赵 婷 婷 ” 女 18 天 水 软件 工程 
201003004， 高 金鹏 ，“ 男 21 天 水 “服务 外 包 
201003005， 王 梓 旭 |， 女 19 兰州 网 络 工 
201003006 。 吕 洁 女 19 武威 “服务 外 包 
201003007 许飞 男 20 陇南 “网 络 工程 
201003008 。 马 仲 男 22 平凉 软件 工程 
201003009， 李 博 博 。 女 20 张掖 服务 外 包 
201003010 。 李 敏 EE 18 金昌 网 络 工程 


其 特点 是 结构 简单 ,易于 管理 ,是 当今 的 主流 数据 库 模 型 。 在 关系 表 中 ,一 行 是 一 个 
记录 ,一 列 是 一 个 字段 。 


4. 主流 数据 库 简介 


(1) Access 数据 库 : 是 微软 公司 开发 的 一 个 简单 实用 的 关系 型 数据 库 管理 系统 ,是 
Office 软件 套装 中 的 一 员 。 简 单 易 用 、 功 能 强大 ,是 目前 动态 网 站 开发 中 最 常用 的 小 型 数 
据 库 系统 。 

(2) SQL Server 数据 库 : 是 微软 公司 开发 的 中 型 关系 型 数据 库 管 理 系统 ,是 目前 动 
态 网 站 开发 中 最 常用 的 中 型 数据 库 系统 。 

(3) Oracle 数据 库 : 是 甲骨 文公 司 开发 的 一 款 大 型 关系 型 数据 库 管理 系统 。 一 般 应 用 
于 商业 ,政府 部 门 , 它 的 功能 很 强大 ,能 够 处 理 大 批量 的 数据 ,在 网 络 方面 也 用 得 非常 多 。 

(4) Sybase 数据 库 : 是 Sybase 公司 推出 的 一 款 关系 型 数据 库 管理 系统 ,是 一 种 典型 
的 客户 机 /服务 器 环境 下 的 大 型 数据 库 系统 ,在 大 中 型 系统 中 具有 广泛 的 应 用 。 


9.2 使 用 Access 创建 数据 库 


Access 是 Office 软件 套装 中 的 一 员 ,是 微软 公司 开发 的 一 个 简单 实用 的 关系 型 数据 
库 管理 系统 ,简单 易 用 、 功 能 强大 ,是 目前 动态 网 站 开发 中 最 常用 的 小 型 数据 库 系统 。 


2 数据 库 访问 技术 257 


下 面 就 以 图 9-3 所 示 的 关系 表 为 例 ,介绍 在 Access 中 创建 数据 库 的 具体 过 程 。 
9.2.1 规划 数据 库 


在 创建 数据 库 之 前 ,首先 要 根据 实际 的 应 用 需要 来 对 数据 库 做 详细 的 规划 ,主要 包 
括 以 下 几 个 方面 : 

(1) 需要 多 少 个 数据 库 以 及 每 个 数据 库 的 名 称 ; 

(2) 每 个 数据 库 中 有 多 少 个 关系 表 以 及 每 个 表 的 名 称 ; 

(3) 每 个 数据 库 中 多 个 关系 表 之 间 的 关联 关系 如 何 ; 

(4) 每 个 关系 表 的 结构 , 即 字 段 名 称 .数据 类 型 .说明 等 信息 ; 

(5) 每 个 关系 表 中 的 具体 内 容 。 

【实例 9-1】 规划 一 个 学 生 信 息 数 据 库 。 

(1) 只 有 一 个 数据 库 , 其 名 称 为 student_083. mdb; 

(2) 数据 库 中 只 有 一 个 关系 表 : student_info; 

(3) 关系 表 的 结构 如 表 9-1 所 示 ; 

表 9-1 学 生 信 息 数据 库 中 关系 表 的 结构 


stu_id 文本 学 号 stu_age 字 年 龄 
stu_name 文本 姓名 stu_origin “本 籍贯 
stu_sex 文本 昂 stu_profession 本 专业 


(4) 关系 表 的 内 容 如 表 9-2 所 示 。 
表 9-2 学 生 信息 数据 库 中 关系 表 的 内 容 


学 号 姓名 性 别 籍贯 专业 
201003001 姜 辽 辽 男 陇南 网 络 工程 
201003002 范 超 男 兰 4 软件 工程 
201003003 赵 婷 婷 女 天 水 软件 工程 
201003004 高 金鹏 男 天 水 服务 外 包 
201003005 王 梓 旭 女 兰 : 网 络 工程 
201003006 昌 洁 女 武威 服务 外 包 
201003007 许飞 男 陇南 网 络 工程 
201003008 马 仲 男 平凉 软件 工程 
201003009 李 博 博 女 张掖 服务 外 包 
201003010 李 敏 女 金昌 网 络 工程 

9.2.2 ”创建 数据 库 


【实例 9-2】 根据 上 述 【 实 例 9-1] 中 的 规划 ,使 用 Access 创建 一 个 学 生 信息 数据 库 。 
本 例 在 Windows 7 系统 中 ,以 Access 2003 为 基础 进行 讲解 。 


258 Mairsarid 


(1) 运行 Microsoft Office Access 2003 软件 。 

(2) 执行 菜单 命令 “文件 ">" 新建", 打开“ 新建 文件 "任务 窗口 ,如 图 9-4 所 示 。 

(3) 在 “新 建文 件 ” 任 务 窗口 中 单 击 “ 空 数据 库 ”, 打 开 “ 文 件 新 建 数 据 库 ” 对 话 框 ,如 
图 9-5 所 示 。 


修改 日 期 


保 放 位 置 : [ 且 F 加 @ :村 |Xx 蕊 国 `IO- 
人称 


该 文件 夫 为 空 . 


GE 


国 空 玫 所 访 页 

图 使 用 现 有 数据 9 项 目 .， 
团 使用 新 数据 的 顺 目 .， 
加 要 据 现 有 文件 


搜索 ] 


MW Office Online ; [student_063l ndb 


加 本 机 上 的 模板 : Et 0ffice Access 数据 库 en 了 b) 


图 9-4 “新 建文 件 "任务 图 9-5 “文件 新 建 数据 库 " 对 话 框 
窗口 


(4) 选择 合适 的 路 径 ,在 "文件 名 ”后 面 的 文本 框 中 输入 “student_083. mbd”, 然 后 单 
击 “ 创 建 ”按钮 返回 到 Access 的 主 窗口 ,如 图 9-6 所 示 。 


确 打 TO 岂 iitD) 站 EN | X la 基 国 音 


对 铺 
查询 
语 体 
报表 
页 
宏 
模块 


加 
国 
卓 
和 
忌 
起 


9-6 ， 主 窗 口 


(5) 有 三 种 创建 关系 表 的 方式 : 使 用 设计 器 创建 表 、 使 用 向 导 创 建 表 和 通过 输入 数 
据 创 建 表 , 在 此 ,选择 最 常用 的 “使 用 设计 器 创建 表 ” 的 方式 。 

选中 “使 用 设计 器 创建 表 ” 然 后 单 击 " 设 计 ” 按 钮 或 者 直接 双击 “使 用 设计 器 创建 表 ” 
打开 * 表 设计 器 ”窗口 ,如 图 9-7 所 示 。 

(6) 根据 数据 库 的 规划 ,在 第 一 行 的 “字段 名 称 ” 中 输入 “stu_id”, 在 “数据 类 型 "中 单 
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宝 所 名称 雪 据 关 弄 识 明 加 


膏 规 


字段 名 称 最 长 可 到 64 区 该 了 | 键 可 查看 有 关 字段 名 称 的 帮 


图 9-7 “ 表 设 计 器 "窗口 


击 则 出 现 数据 类 型 选择 框 ,如 图 9-8 所 示 ,根据 规划 选择 "文本 ”类 型 ,最 后 在 “说 明 "中 输 
入 “学 号 ”“ 说 明 ” 中 的 信息 也 可 以 不 填 。 


EE 谭 
DE | 
FE 
上 
日 多时 间 
区 
EE 一 
是 | 
LE 对 象 ER 一 
过 
| = 
T 
E | 
字段 属性 
Ea 
室 和 大 小 区 
相 式 
输入 拉 码 
村 是 
由 A 什 
esp 孝 据 类 型 宝 用 户 所 能 人 存在 该 字 生 中 全 的 各 基 。 技 Pi 刍 可 查看 有 关 孝 据 类 
区 E37 济 
少 二 字 了 攻 
攻 
| 有 省 重 看) 
Unicode 压 编 苦 
输入 法 本 了 
了 语 富 模式 ( 仅 日文 于 和 全 
智能 标记 


图 9-8 数据 类 型 选择 


(7) 类 似 的 方法 ,根据 数据 库 的 规划 输入 所 有 的 表 的 结构 信息 ,如 图 9-9 所 示 。 

(8) 单 击 “ 关 闭 ” 按 钮 打开 是 否 保存 对 话 框 .如 图 9-10 所 示 。 

(9) 单 击 “ 是 ”按钮 打开 “另存 为 对话 框 ,如 图 9-11 所 示 。 

(10) 根据 数据 库 的 规划 输入 表 名 “student_info”, 单 击 “ 确 定 ” 按 钮 打开 “尚未 定义 主 
键 ”对 话 框 ,如 图 9-12 所 示 。 


I 二 
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字段 说明 是 可 选 的 。 用 于 帮助 说 明 该 字 检 ,而且 当 在 窗 


De 接 弄 


有 效 性 文本 
索引 
code 
输入 法 模式 
IJ 语句 模式 ( 仅 日 文 ) 
智能 标记 


图 9-9 输入 所 有 的 结构 信息 


9-12 “尚未 定义 主键 "对 话 框 


(11) 主键 是 唯一 标识 一 个 记录 的 字段 , 即 其 值 不 重复 的 字段 ,主要 用 来 与 数据 库 中 


的 其 他 表 建 立 关联 。 


在 本 例 中 ,因为 数据 库 只 有 一 个 表 , 无 法 建立 关联 关系 ,所 以 也 可 以 不 定义 主键 , 单 


击 “ 否 ”按钮 返回 到 主 窗口 。 
此 时 ,在 主 窗口 中 多 了 一 个 名 为 student_into 的 表 , 如 图 9-13 所 示 。 
(12) 在 主 窗口 中 ,双击 表 名 student_info 打开 表 内 容 录 入 窗口 ,如 图 9-14 所 示 。 


(13) 一 行 就 是 一 个 记录 ,根据 数据 库 规划 的 要 求 依次 输入 相应 的 内 容 , 如 图 9-15 


所 示 。 
(14) 直接 单 击 “ 关 闭 ” 按 钮 返回 ,系统 会 自动 保存 记录 内 容 。 


(15) 至 此 ,整个 数据 库 创建 完成 。 在 创建 过 程 中 或 创建 完成 以 后 ,还 可 以 根据 需求 


对 表 的 结构 或 记录 的 内 容 进 行 修改 。 


在 一 些 大 型 应 用 程序 设计 中 ,有 可 能 需要 多 个 数据 库 , 或 者 一 个 数据 库 中 可 能 包括 


多 个 表 , 并 且 表 之 间 要 建立 一 定 的 关联 关系 。 
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加 | | 和 地 
荐 ”要 和 要 


图 9-13 主 窗口 


stu neme stu sex stu sge stu origin [stu profession 
0 


讶 叶 酒 酒 半 这 洒 站 酒 酒 


记录 10 共有 记录 数 : 10 


图 9-15 录入 记录 


9.3 ”数据库 的 巡 接 


数据 库 创 建 好 之 后 ,如 果 要 实现 通过 ASP 对 其 进行 访问 , 则 必须 先进 行 和 数据 库 的 
连接 操作 。ASP 本 身 无 法 直接 和 数据 库 进行 连接 ,必须 通过 数据 库 驱 动 程序 才能 与 数据 
库 进行 连接 ,通过 ASP 访问 数据 库 的 流程 如 图 9-16 所 示 。 


262 


Musssarid 


客户 端 | | Web [| ASP | “| 
浏览 器 | 。 | 服务 器 | 。 | 程序 | 。 | OPBC 


机 涝 玫 


图 9-16 ASP 访问 数据 库 的 流程 


9.3.1 ODBC 简介 


ODBC ,英文 Open Database Connectivity 的 缩写 , 即 “ 开 放 数 据 库 互 连 ” 的 意思 。 是 
微软 公司 开放 服务 结构 中 有 关 数 据 库 的 一 个 组 成 部 分 , 它 建立 了 一 组 规范 ,并 提供 了 一 
组 对 数据 库 访 问 的 标准 API( 应 用 程序 编程 接口 ), 这 些 API 独立 于 不 同 厂商 的 DBMS 
(Database Management System, 数据 库 管理 系统 ), 也 独立 于 具体 的 编程 语言 。 这 些 
API 利用 SQL 来 完成 其 大 部 分 的 任务 ,ODBC 本 身 也 提供 了 对 SQL 语言 的 支持 ,用 户 可 
以 直接 将 SQL 语句 传送 给 ODBC 。 

ODBC 驱动 程序 是 一 组 . dll 的 文件 ,提供 了 ODBC 和 数据 库 之 间 的 接口 。 

ODBC 的 最 大 优点 是 一 个 应 用 程序 通过 ODBC 驱动 程序 使 用 一 组 通用 的 命令 代码 
来 访问 不 同 的 数据 库 管 理 系统 所 建立 的 数据 库 。 


9.3.2 使 用 DSN 连接 数据 库 


DSN ,英文 Data Source Name 的 缩写 , 即 “ 数 据 源 名 称 ” 的 意思 ,用 来 表示 一 组 数据 库 
连接 参数 的 标识 。DSN 为 ODBC 定义 了 一 个 确定 的 数据 库 和 必须 用 到 的 ODBC 驱动 程 
序 ,每 个 ODBC 驱动 程序 定义 为 该 驱动 程序 支持 的 一 个 数据 库 创建 DSN 需要 的 信息 ,也 
就 是 说 ,安装 ODBC 驱动 程序 及 创建 一 个 数据 库 之 后 ,必须 创建 一 个 DSN。 

【实例 9-3】 使 用 DSN 的 方式 连接 学 生 信息 数据 库 (Cstudent_083. mdb) ,使 用 
Windows 7 操作 系统 。 

(1) 打开 “控制 面板 ”依次 单 击 " 系 统 和 安全 ”一 “管理 工具 ”一 “数据 源 (ODBC)”, 打 
开 “ODBC 数据 源 管理 器 "对话 框 ,如 图 9-17 所 示 。 


NS Ac abase 
Visio Database Sanples Microsoft Access Driver 他 


De 


[| 


9-17 “ODBC 数据 源 管理 器 "对 话 框 
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(2) 单 击 “ 系 统 DSN” 选 项 卡 切换 到 “系统 DSN” 界 面 ,如 图 9-18 所 示 。 


和 


ED Ge i 攻 量 辐 


9-18 “系统 DSN" 选 项 卡 


(3) 单 击 “ 添 加 ”按钮 打开 “创建 新 数据 源 ” 对 话 框 ,如 图 9-19 所 示 。 


Driver do Microsoft Paradox (* db ) 
Driver para o Microsoft Visual FoxPro 


Microsoft Access-Treiber (+ mdb) 
1 ee 


< 上 一 步 @) 


9-19 “创建 新 数据 源 " 对 话 框 


(4) 在 右面 的 列表 框 中 选中 Driver do Microsoft Access( x*. mdb) 选 项 , 单 击 “ 完 成 ” 
按钮 打开 “ODBC Microsoft Access 安装 ”对 话 框 ,如 图 9-20 所 示 。 

(5) 在 “数据 源 名 ”后 面 的 文件 本 框 中 输入 一 个 数据 库 连 接 标 识 符 如 “dbconn”, 在 “说 
明 ” 后 面 的 文本 框 中 输入 一 个 数据 库 的 说 明 信 息 如 “083 班 学 生 信息 库 ”, 然 后 单 击 “选择 ” 
按钮 打开 “选择 数据 库 ” 对 话 框 ,如 图 9-21 所 示 。 

(6) 在 “选择 数据 库 ” 对 话 框 中 .选择 正确 的 路 径 , 并 且 选 中 “student_083. mdb” 数 据 
库 文件 ,然后 单 击 “ 确 定 ” 按 钮 返回 到 “ODBC Microsoft Access 安装 ”对 话 框 ,如 图 9-22 
所 示 。 

(7) 单 击 “ 确 定 ” 按 钮 返回 到 “ODBC 数据 源 管理 器 "对话 框 , 单 击 “ 确 定 ” 按 钮 返回 。 
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图 9-20 “ODBC Microsoft Access 安装 "对 话 框 


目录 多): 

| ev Asysten32 
[一 

巴 Yindaows 


多 systen32 
器 0409 
OO hdobe 


站 AdvancedTnstal ™ 
驱动 器 0) : 
ec: WIN 


数据 库 : 6: \myasp\student_083. mdb 


(RS (eG eR [ED RD 


系统 数据 库 YY) 


9-22 ”返回 "ODBC Microsoft Access 安装 ”对 话 框 
(8) 打开 Dreamweaver 软件 ,打开 已 经 建立 的 动态 网 站 。 随 便 新 建 一 个 文件 或 打开 
一 个 已 有 的 文件 。 

(9) 执行 菜单 命令 “窗口 >“ 数据 库 ” 打 开 “ 数 据 库 ” 浮 动 面 板 , 如 图 9-23 所 示 。 
(10) 单 击 左上 角 的 “添加 ”(“ 十 ”号 ) 按 钮 弹出 下 拉 菜 单 ,如 图 9-24 所 示 。 

(11) 单 击 “数据 源 名 称 (DSN) ”命令 打开 “数据 源 名 称 (DSN)” 对 话 框 ,如 图 9-25 
所 示 。 
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池 寺 服务 器。 3. 设置 站 点 的 型 过 服务 器 。 
4 单 击 上 面 的 + 按钮 创建 连接 。 4. 单 击 上 面 的 + 按钮 创建 连接 。 
9-23 “数据 库 ” 浮 动 面板 9-24 下 拉 菜 单 


图 9-25 “数据 源 名 称 (ODBC) "对 话 框 


(12) 在 “连接 名 称 ” 后 面 的 文件 框 中 输入 一 个 标识 符 如 “conn”, 在 “数据 源 名 称 
(DSN)” 右 面 的 下 拉 列 表 框 中 选中 刚才 建立 的 DSN 连接 dbconn (如 果 之 前 没有 建立 
DSN, 则 在 这 里 也 可 以 通过 单 击 “ 定 义 ” 按 钮 来 建立 ,其 过 程 与 前 面 的 方法 完全 一 样 )。 

如 果 数 据 库 进行 了 加 密 , 则 还 需要 在 此 输入 正确 的 用 户 名 和 和 密码。 

(13) 单 击 “ 测 试 "按钮 对 本 次 数据 库 连接 进行 测试 ,如 果 弹 出 如 图 9-26 所 示 的 对 话 
框 , 则 连接 成 功 。 

(14) 单 击 “ 确 定 ” 按 钮 返回 到 “数据 源 名 称 (DSN)” 对 话 框 , 单 击 “ 确 定 ” 按 钮 返回 到 
Dreamweaver 主 界面 。 

(15) 至 此 ,完成 了 使 用 DSN 方式 连接 数据 库 的 过 程 。 

(16) 在 “数据 库 ” 浮 动 面 板 中 也 会 显示 当前 已 连接 数据 库 的 相关 信息 ,如 图 9-27 所 示 。 


图 9-26 “成 功 创建 连接 脚本 ”对 话 框 图 9-27 “数据 库 ” 浮 动 面板 
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(17) 同时 ,在 网 站 的 根 目 录 下 自动 生成 了 一 个 名 为 Connections 的 文件 夹 ,里 面 有 
一 个 名 为 conn. asp 的 文件 ,其 内 容 如 下 : 


< 
'FileName="Connection odbc conn dsn.htm 

'Type= "RDO" 

'DesigntimeType= "ADO" 

"BTTP= "true" 

'Catalog="" 

'Schema="" 
Dim MM connl1 STRING 


MM connl STRING="dsn=dbconn;" 
和 > 


9.3.3 使 用 自 定义 连接 字符 串 连 接 数 据 库 


使 用 DSN 的 方式 连接 数据 库 比 较 直 观 , 容 易 理解 ,但 是 整个 过 程 比较 烦琐 。 接 下 来 
介绍 一 种 比较 简单 的 数据 库 连接 方式 ,即使 用 自 定义 连接 字符 串 连 接 数据 库 。 

【实例 9-4】 使 用 自 定 义 连接 字符 串 的 方式 连接 学 生 信 息 数据 库 (student_083. 
mdb) ,使 用 Windows 7 操作 系统 。 


(1) 打开 Dreamweaver 软件 ,打开 已 经 建立 的 动态 网 站 。 随 便 新 建 一 个 文件 或 打开 
一 个 已 有 的 文件 。 


(2) 执行 菜单 命令 “窗口 >" 数据 库 ” 打 开 " 数 据 库 ” 浮 动 面板 。 


(3) 单 击 左 上 角 的 “添加 ”(“* 十 ”号 ) 按 钮 弹出 下 拉 菜 单 , 单 击 “ 自 定义 连接 字符 串 ” 命 
令 打开 “ 自 定义 连接 字符 串 ” 对 话 框 ,如 图 9-28 所 示 。 


连接 字符 串 - 


Dreamweaver 应 连接 : 四 使 用 测 式 服务 器 上 的 驱动 程序 


国 使 用 此 计算 机 上 的 红 动 程序 


图 9-28 “ 自 定义 连接 字符 串 " 对 话 框 
(4) 在 “连接 名 称 ” 后 面 的 对 话 框 中 输入 一 个 本 次 数据 库 连 接 的 标识 符 如 “conn”, 在 
“连接 字符 串 ”" 后 面 的 文本 框 中 输入 *"Driver 二 (Microsoft Access Driver (<* .mdb)}s; 
DBQ=" &.Server. MapPath ( " student _083. mdb")” 或 “" Provider = Microsoft. Jet. 


OLEDB. 4. 0;Data Source="&.Server. MapPath( "student_083. mdb")”, 在 “Dreamweaver 应 
连接 ”后 面 的 选项 中 选择 “使 用 测试 服务 器 上 的 驱动 程序 ”。 
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(5) 单 击 “ 测 试 " 按 钮 对 本 次 数据 库 连 接 进行 测试 ,如 果 弹 出 如 图 9-29 所 示 的 对 话 
框 , 则 连接 成 功 。 

(6) 单 击 “ 确 定 ” 按 钮 返回 到 Dreamweaver 主 
界面 。 

(7) 至 此 ,完成 了 使 用 自 定义 连接 字符 串 连接 数 
据 库 的 整个 过 程 。 

(8) 同 理 , 在 网 站 的 根 目录 下 也 会 自动 生成 了 一 
个 名 为 Connections 的 文件 夹 ,里 面 也 有 一 个 名 为 
conn. asp 的 文件 ,其 内 容 如 下 : 


9-29 “成 功 创建 连接 脚本 "对话 框 


<% 

'FileName="Connection ado conn string.htm" 
'Type= "RDO" 

'DesigntimeType= "ADO" 

"HTTP= "true" 

‘Catalog="" 

'Schema="" 

Dim MM conn STRING 


MM conn STRING="DRIVER= {Microsoft Access Driver (* .mdb)};DBQ="&Server.MapPath 
("student 083.mdb") 
$> 


9.3.4 使 用 Connection 对 象 连接 数据 库 


ADO 组 件 中 的 Connection 对 象 专门 是 用 来 连接 数据 库 的 ,可 以 直接 在 ASP 文件 中 
采用 脚本 编程 的 方式 进行 数据 库 的 连接 ,使 用 简单 方便 ,也 是 当前 最 常用 的 技术 ,这 部 分 
的 内 容 将 在 9. 4 节 中 进行 详细 的 介绍 。 


9.4 数据 库 的 访问 


数据 库 连接 之 后 ,对 数据 库 的 访问 主要 是 指 打开 数据 库 、 查 询 记录 、 增 加 记录 、 删 除 
记录 ,修改 记录 和 关闭 数据 库 等 。 

通过 ASP 访问 数据 库 主要 是 通过 ADO(ActiveX Data Object,Activex 数据 对 象 ) 组 
件 来 实现 ,下 面 先 介绍 ADO 组 件 中 最 常用 的 三 个 对 象 , 即 Connection 对 象 .Command 对 
象 和 Recordset 对 象 ,其 功能 分 别 是 数据 库 连 接 、 数 据 库 查询 和 数据 库 修改 。 


9.4.1 Connection 对 象 
1. 功能 说 明 
Connection 对 象 的 主要 功能 是 实现 与 数据 库 的 连接 操作 ,其 类 似 于 使 用 自 定义 连接 
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字符 串 的 方式 连接 数据 库 ,但 是 其 还 有 若干 属性 和 方法 ,用 来 实现 其 他 的 相关 功能 。 


2. 属性 和 方法 


Connection 对 象 的 属性 和 方法 分 别 如 表 9-3 和 表 9-4 所 示 。 


属 性 


表 9-3 ”Connection 对 象 的 属性 
功能 说 明 


Attributes 


可 读 写 long 类 型 ,通过 两 个 常数 之 和 指定 是 否 使 用 保留 事务 。 常 数 
adxactcommitretaining 表示 调用 committrans 方法 时 启动 一 个 新 事务 ;常数 
adxactabortretaning 表示 调用 rollbacktrans 方法 时 启动 一 个 新 事务 。 默 认 值 
为 0, 表示 不 使 用 保留 事务 


CommandTimeout 


ConnectionString 


可 读 写 long 类 型 ,指定 中 止 某 个 相关 command 对 象 的 execute 调用 之 前 必须 
等 待 的 时 间 。 默 认 值 为 30 秒 
可 读 写 string 类 型 ,提供 数据 提供 者 或 服务 提供 者 打开 到 数据 源 的 连接 所 需 
要 的 特定 信息 


ConnectionTimeout 


Cursorlocation 


DefaultDatabase 


Isolationlevel 


可 读 写 long 类 型 ,指定 中 止 一 个 失败 的 connection. open 方法 调用 之 前 必须 
等 待 的 时 间 ,默认 值 为 15 秒 
可 读 写 long 类 型 ,确定 是 使 用 客户 端 (aduseclient) 游标 引擎 ,还 是 使 用 服务 器 
端 (aduseserver) 游 标 引 擎 。 默 认 值 是 aduseserver 
可 读 写 string 类 型 ,如果 connectstring 中 未 指定 数据 库 名 称 ,就 使 用 这 里 所 指 
定 的 名 称 , 对 SQL Server 而 言 ,其 值 通常 是 pubs 

可 读 写 long 类 型 ,指定 和 其 他 并 发 事务 交互 时 的 行为 或 事务 


Mode long 类 型 ,指定 对 connection 的 读 写 权限 
可 读 写 string 类 型 ,如果 connectionstring 中 未 指定 OLE DB 数据 或 服务 提供 
Provider 者 的 名 称 ,就 使 用 这 里 所 指定 的 名 称 。 默 认 值 是 MSDASQL (Microsoft OLE 
db Provider for ODBC) 
State 可 读 写 long 类 型 ,指定 连接 是 处 于 打开 状态 .关闭 状态 或 中 间 状 态 
Version 只 读 string 类 型 ,返回 ADO 的 版 本 号 
表 9-4 Connection 对 象 的 方法 
方 法 功能 说 明 
BeginTrans 初始 化 一 个 事务 ,其 后 必须 有 committrans 或 rollbacktrans 相对 应 
Close 断 开 连接 


CommitTrans 


提交 一 个 事务 .以 完成 对 数据 源 的 永久 改变 (要 求 使 用 之 前 必须 已 经 调 
用 了 begintrans 方法 ) 


从 select SQL 语句 返回 一 个 Forward-only recordset 对 象 ,也 用 来 执行 那 


Ee 些 不 返回 recordset 语句 

Open 用 连接 字符 串 来 打开 一 个 连接 

siSebaiia 返回 一 个 recordset 对 象 以 提供 数据 源 的 结构 信息 

jell nas 取消 一 个 事务 ,恢复 对 数据 源 做 的 临时 性 改变 (要 求 使 用 之 前 必须 已 经 


调用 了 begintrans 方法 ) 
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9.4.2 Command 对 象 


1. 功能 说 明 


Command 对 象 的 主要 功能 是 对 数据 库 执行 操作 命令 ,最 常用 的 是 执行 SQL 语句 ， 
并 且 将 执行 的 结果 返回 给 Recordset 对 象 。 使 用 Command 对 象 主要 用 来 实现 对 数据 库 
的 查询 操作 。 


2. 属性 和 方法 
Command 对 象 的 属性 和 方法 分 别 如 表 9-5 和 表 9-6 所 示 。 


表 9-5 Command 对 象 的 属性 


属 性 功能 说 明 
指针 类 型 ,指向 command 所 关联 的 connection 对 象 。 对 于 现存 的 已 打开 连接 ， 


ActiveConnection | 可 使 用 set cmmname. activeconnection 一 cnnname。 另 外 ,也 可 以 不 用 connection 
对 象 名 称 而 使 用 有 效 的 连接 字符 串 去 创建 一 个 新 的 连接 。 默 认 值 为 null 

可 读 写 string 类 型 。 为 activeconnection 指定 一 条 SQL 语句 、 表 名 、 存 储 过 程 名 
CommandText 或 提供 者 能 接受 的 任意 字符 串 。commandtype 属性 的 值 决定 了 commandtext 属 
性 值 的 格式 。 默 认 值 为 空 字符 串 : ”” 

可 读 写 long 类 型 ,指定 中 止 一 个 command. execute 调用 之 前 必须 等 待 的 时 间 。 
这 里 的 值 优先 于 connection. comandtimeout 中 所 设 定 的 值 。 默 认 值 为 30 秒 

可 读 写 long 类 型 ,指定 数据 提供 者 该 如 何 解释 commandtext 的 属性 值 。 
CommandType commandtype 等 效 于 connection. execute 方 法 中 的 可 选 参数 Ingoption。 默 认 值 
为 adcmdunkown 


Name 可 读 写 string 类 型 ,指定 command 的 名 称 


CommandTimeout 


可 读 写 boolean 类 型 ,判断 数据 源 是 否 把 commandtext 中 的 SQL 语句 编译 为 
Prepared 
prepared statement 
State 可 读 写 long 类 型 ,指定 commnad 的 状态 
表 9-6 ”Command 对 象 的 方法 
方 法 功能 说 明 
CreateParameter 在 执行 该 方法 之 前 ,必须 首先 声明 一 个 adodb. parameter 对 象 


9.4.3 ”Recordset 对 象 


1. 功能 说 明 


Recordset 对 象 的 主要 功能 是 对 数据 库 进行 修改 操作 ,在 Recordset 对 象 中 ,关系 表 
就 是 一 个 二 维 表格 ,通过 记录 指针 可 以 方便 地 对 当前 记录 进行 相关 的 操作 ,可 以 实现 诸 
如 增加 记录 、 删 除 记录 和 修改 记录 的 功能 。 
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2. 属性 和 方法 
Recordset 对 象 的 属性 、 方 法 和 事件 分 别 如 表 9-7 一 表 9-9 所 示 。 
表 9-7 Recordset 对 象 的 属性 
属 性 功能 说 明 
可 读 写 long 类 型 ,要 么 是 设置 或 返回 当前 记录 所 处 的 页 面 序号 ,要 么 是 一 个 
positionenum 常数 。 在 获取 或 设置 absolutepage 的 值 之 前 ,必须 先 设 定 pagesize 
AbsolutePage 的 值 。absolutepage 是 从 1 开始 计数 的 , 如 果 当 前 记录 位 于 第 一 页 时 ， 


absolutepage 的 返回 值 为 1, 对 absolutepage 设置 将 使 记录 指针 指向 指定 页 的 第 
一 条 记录 


AbsolutePosition 


可 读 写 的 long 类 型 ,从 1 开始 计数 ,设置 或 返回 当前 记录 所 处 的 位 置 。 
absoluteposition 的 最 大 取 值 是 recordcount 属性 的 值 


ActiveCommand 可 读 写 的 string 类 型 ,recordset 所 关联 的 先前 打开 的 command 对 象 名 称 
Pe 指针 类 型 ,指向 recordset 所 关联 的 先前 打开 的 connection 对 象 ,或 指向 一 条 完整 
° 有 效 的 connectionstring 串 值 
Bof 只 读 boolean 类 型 , 若 为 true, 则 表明 记录 指针 已 位 于 recordset 第 一 条 记录 之 前 ， 
并 且 没 有 了 当前 记录 
可 读 写 variant 类 型 ,返回 对 特定 记录 的 引用 或 使 用 一 个 bookmark 值 使 记录 指针 
Bookmark 


CacheSize 


指向 特定 记录 
可 读 写 long 类 型 ,指定 本 地 cache 中 所 存 的 记录 条 数 ,最 小 值 为 1, 也 系统 的 默 
认 值 


CursorLocation 


可 读 写 long 类 型 ,指定 可 流动 游标 的 位 置 , 即 cursortype 是 位 于 客户 端 还 是 位 于 
服务 器 端 。 默 认 值 是 使 用 OLE DB 数据 源 提供 的 游标 


CusrsorType 可 读 写 long 类 型 ,指定 recordset 游标 的 类 型 ,默认 值 是 forward-only 游标 

DataMember 指针 类 型 ,指向 关联 的 dataenvironment command 对 象 

DataSource 指针 类 型 ,指向 关联 的 dataenvironment. connection 对 象 

EditMode 只 读 long 类 型 ,返回 recordset 的 编辑 状态 

Eof 只 读 boolean 类 型 , 若 为 true, 则 表明 记录 指针 已 超出 recordset 的 最 后 一 条 记录 ， 
并 且 没 有 了 当前 记录 

lies 可 读 写 variant 类 型 ,要 么 是 一 条 件 表 达 式 ,要 么 是 指向 特定 记录 的 bookmark 数 
组 ,要 么 是 一 个 filter 常数 

LockType 可 读 写 long 类 型 ,指定 打开 recordset 记录 的 锁定 方法 ,默认 值 是 只 读 

MaxRecords 可 读 写 long 类 型 ,指定 select 查询 或 存储 过 程 中 返回 的 最 大 记录 条 数 ,默认 值 为 

- 0, 即 全 部 返回 

PageCount 只 读 long 类 型 ,返回 recordset 所 有 的 页 数 , 必 须 设 定 了 pagesize 的 值 才 能 使 用 

PageSize 可 读 写 long 类 型 ,设置 或 返回 一 个 逻辑 页 所 包含 的 记录 条 数 

PersistFormat 可 读 写 long 类 型 ,设置 或 返回 由 调用 save 方法 所 创建 的 recordset 文件 的 格式 
只 读 long 类 型 ,如果 recordset 支持 近似 定位 或 支持 书签 , 则 返回 带 可 流动 游标 的 

RecordCount recordset 所 含有 的 记录 数 ; 如 果 不 支持 , 则 必须 使 用 movelast 方法 以 取得 确实 覆 


盖 了 所 有 记录 的 准确 的 recordcount 数值 
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续 表 
属 性 功能 说 明 
本 可 读 写 string 类 型 ,包含 一 条 不 含 保留 字 order by 的 SQL ordery by 子 句 ,用 以 指 
定 recordset 的 排序 方式 
Se 可 读 写 string 类 型 ,可 以 是 SQL 语句 、 表 名 ,存储 过 程 名 或 相关 command 对 象 名 
State | 可 读 写 long 类 型 ,为 对 象 状态 常数 之 一 
Status 只 读 long 类 型 ,表明 对 recordset 进行 批 处 理 或 其 他 多 记录 操作 后 的 状态 


表 9-8 ”Recordset 对 象 的 方法 


方 法 功能 说 明 
AddNew 向 可 更 新 的 recordset 添加 一 条 新 记录 
Cancel 取消 异步 查询 的 执行 ,中 止 存储 过 程 或 复合 SQL 语句 创建 多 个 recordset 
CancelBatch 取消 lockedit 值 为 batchoptimistic 的 recordset 的 即将 生效 的 批量 更 新 操作 
Clone 复制 一 个 带 有 独立 记录 指针 的 recordset 对 象 
Close 关闭 recordset 对 象 
Delete 如 果 recordset 的 lockedit 属性 值 未 设 为 adlockbatchoptimistic, 则 立刻 删除 当 
前 记录 
Find 查询 满足 指定 条 件 的 记录 
GetRows 返回 一 个 二 维 数组 
GetString 默认 情况 下 ,返回 指定 数目 记录 的 string 串 值 
Move 从 当前 记录 移动 记录 指针 
MoveFirst 移动 记录 指针 到 第 一 条 记录 
MoveLast 移动 记录 指针 到 最 后 一 条 记录 
MoveNext 移动 记录 指针 到 下 一 条 记录 


MovePrevious 移动 记录 指针 到 前 一 条 记录 
返回 另外 的 recordset, 它 通常 由 能 产生 多 个 recordset 的 复合 SQL 语句 或 存 


NextRecordset 储 过 程 来 创建 

Open 在 一 个 活动 command 或 connection 对 象 上 打开 一 个 recordset 

Requery 重新 从 表 中 获取 recordset 的 内 容 , 等 效 于 close 后 再 open 

Resync 重新 从 表 中 获取 部 分 recordset 内 容 

Save 创建 包含 recordset 永久 性 拷贝 的 文件 

Supports 如 果 数 据 提供 者 支持 指定 的 游标 相关 的 方法 , 则 返回 true, 和 否则 返回 为 false 
Update 使 对 recordset 的 修改 对 底层 数据 源 中 的 表 生 效 

UpdateBateh 对 recordset (locktype 属性 值 为 adbatchoptimistic, cursortype 属性 值 为 


adopenkeyset 或 adopenstatic) 所 做 的 修改 对 底层 数据 源 中 的 表 生 效 
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表 9-9 Recordset 对 象 的 事件 


事 件 功能 说 明 
EndofRecordset 记录 指针 试图 移动 到 最 后 一 条 记录 之 后 时 
FieldChangeComplete 字段 值 的 改变 完成 以 后 
MoveComplete 移动 记录 指针 的 方法 执行 之 后 
RecordsChangeComplete 单个 记录 编辑 完成 以 后 
RecordsetChangeComplete 缓存 中 的 改变 对 底层 表 生 效 之 后 
willChangField 对 字段 值 改 变 之 前 
willChangeRecord 对 单个 记录 改变 之 前 


缓存 中 的 改变 对 底层 表 生效 之 前 
移动 记录 指针 的 方法 执行 之 前 


willChangeRecordset 


willMove 


9.4.4 数据 库 访问 实例 
【实例 9-5】 访问 学 生 信 息 数据 库 (student_083. mdb)。 
1. 数据 库 的 打开 和 关闭 (9-5-1. asp) 


在 进行 数据 库 访问 之 前 首先 要 打开 数据 库 , 而 在 数据 库 访 问 之 后 要 及 时 关闭 数据 
库 , 以 释放 所 占用 的 系统 资源 。 

(1) 打开 Dreamweaver。 

(2) 新 建 一 个 ASP VBScript 文件 ,保存 为 9-5-1. asp。 

(3) 切换 到 “代码 ”视图 ,输入 如 下 代码 : 


<%@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%> 

<!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3. 
org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 数 据 库 访 问 < /title> 

</head> 

<body> 

< 

"数据 库 的 连接 和 打开 

Set conn= Server .CreateObject ("ADODB .Connection") 

"connstrl 和 connstr2 两 种 方式 任 选 一 种 即 可 


'connstrl="Provider=Microsoft .Jet .OLEDB.4.0;Data Source= 


"&Server.MapPath ("student 083.mdb") 
connstr2="DRIVER= {Microsoft Access Driver (* .mdb)};DBQ= 
"&Server.MapPath ("student 083.mdb") 


conn.Open connstr2 


"数据库 访问 操作 程序 
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'" 数 据 库 的 关闭 
conn.Close 

Set conn=Nothing 
> 

</body> 

</html> 


需要 提醒 的 是 : 因为 任何 数据 库 的 访问 操作 之 前 都 需要 进行 数据 库 的 连接 ,所 以 为 
了 方便 起 见 ,把 数据 库 连接 、 表 内 容 的 输出 等 使 用 比较 频繁 的 功能 模块 单独 放 在 一 个 
ASP 文 件 中 ,在 其 他 文件 的 最 顶端 进行 文件 包含 即 可 。 

文件 包含 的 语法 格式 如 下 : 


<!--#include file= 文 件 名 .asp--> 


2. 表 中 的 记录 以 表格 形式 输出 (9-5-2. asp) 


(1) 打开 Dreamweaver, 新 建 一 个 9-5-2. asp 的 文件 。 
(2) 切换 到 “代码 ”视图 ,输入 如 下 代码 : 


<%@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%> 

<!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3. 
org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 数 据 库 访问 < /title> 

</head> 

<body> 

<% 

"数据 库 的 连接 和 打开 

Set conn= Server.CreateObject ("ADODB .Connection") 
"connstrl 和 connstr2 两 种 方法 任 选 一 种 即 可 
'connstrl="Provider=Microsoft .Jet .OLEDB.4.0;Data Source= 
"&Server.MapPath ("student 083.mdb") 

connstr2="DRIVER= {Microsoft Access Driver (* .mdb)};DBQO= 
"&Server.MapPath ("student 083.mdb") 

conn.Open connstr2 

"建立 RecordSet 对 象 

Set rs=Server.CreateObject ("ADODB.RecordSet") 
sqlstr="select * from student info" 

rs.open sqlstr,conn 

' 数 据 库 中 的 表 以 表格 形式 输出 

Response.Write ("<center>") 

Response .Write ("<h3> 信 息 工 程 学 院 083 班 学 生 信息 表 < /h3>") 
Dimi 


Response.Write ("<table Border=1 BorderColor=black cellSpacing=0 align=center><tr>") 
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For i=0 To rs.Fields.Count-1 
Response.Write("<td>" & rs(i).Name & "</td>") 

Next 

Response .Write ("</tr>") 

Do While NOT rs.EOF 
Response.Write("<tr>") 
For i=0 To rs.Fields.Count-1 

Response.Write("<td>" & rs(i) & "</td>") 

Next 
Response.Write("</tr>") 
rs.MoveNext 

Loop 

"Recordset 的 关闭 

rs.Close 

Set rs=Nothing 

"数据 库 的 关闭 

conn.Close 

Set conn=Nothing 

和 > 

</body> 

</html> 


(3) 浏览 器 中 显示 效果 如 图 9-30 所 示 。 


PP 下 ”有 Windows Internet Explorer [LET 加 | ¥ 


GO [ae nmoonoausszon | 2 ER 


ol 要 上 | 可 | 


de 


9-30 浏览 器 显示 效果 


3. 添加 记录 (9-5-3. htm 和 9-5-3. asp) 


(1) 9-5-3. htm 代码 如 下 : 


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
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org/TR/xhtml1/DTD/xhtml1l- transitional .dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title> 添 加 记录 < /title> 
</head> 
<body> 
<h3> 请 输入 要 插入 记录 的 相关 信息 < /h3> 
<form id="forml" name= "forml" method= "post" action="9-5-3.asp"> 
<label> 学 号 : 
<input type="text" name="student id" id="textfield"/> 
</label> 
<p> 
<label> 姓 名 : 
<input type="text" name="student name" id="textfield2"/> 
</label> 
</p> 
<p> 
<label> 性 别 : </label> 
<label> 


<input name="student sex" type="radio" id="RadioGroupl 0" value= " 男 " checked= 
"checked"/> 
男 </1label> 


<label> 


<input type="radio" name: 
女 </label> 
<br/> 


"student sex" value: "id="RadioGroupl 1"/> 


</p> 

<p> 
<label> 年 龄 : 
<input type="text" name="student age" id="textfield3"/> 
</label> 

</p> 

<p> 
<label> 籍 贯 : 
<input type="text" name="student origin" id="textfield4"/> 
</label> 

</p> 

<p> 
<label> 专 业 : 
<input type="text" name="student profession" id="textfield5"/> 
</label> 

</p> 

<p> 
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<label> 
<input type="submit" name="button" id="button" value= "提交"/> 
</label> 
<label> 
<input type="reset" name= "button2" id="button2" value=" 重 置 "/> 
</label> 
<br/> 
</p> 
</form> 


<p> gnbsp; </p> 


</body> 
</html> 
(2) 浏览 器 显示 效果 如 图 9-31 所 示 。 
~ Windows Internet Explorer 攻 
加 hapynocalhosy9-5-3htm ~ |x NE an Pp- 
| 交 从 (过 (E 查看 V) 收 夫 A) 工具 (T) 大 动 (H) 
| 次 a 各 ia 寻 | 会"- 国 " 口 御 ， m2(5)- 
| a 
| 请 输入 要 插入 记录 的 相关 信息 
学 号 ， 201003011 
姓名 ， 3 云 
性 别 ， 自 男 加 女 
20 


国 internet | 保护 模式: 启用 广 ” 折 100% ~ 


图 9-31 输入 记录 的 对 应 信息 


(3) 输入 记录 的 对 应 信息 . 单 击 “ 提 交 ” 按 钮 。 
(4) 9-5-3. asp 代码 如 下 : 


<%@LANGUAGE= "VBSCRIPT" CODEPAGE="65001"%> 

< !DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3. 
org/TR/html4/loo0se.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title> 数 据 库 访问 < /title> 

</head> 

<body> 

< 


'" 数 据 库 的 连接 和 打开 


人 = 数据 库 访 问 技术 


277 


Set conn= Server.CreateObject ("ADODB .Connection") 
"connstrl 和 connstr2 两 种 方法 任 选 一 种 即 可 

"connstrl= "Provider=Microsoft .Jet .OLEDB.4.0;Data Source= 
"&Server.MapPath ("student 083.mdb") 

connstr2="DRIVER= {Microsoft Access Driver (* .mdb)};DBQ= 
"&Server.MapPath ("student 083.mdb") 

conn.Open connstr2 

' 建 立 RecordSet 对 象 

Set rs=Server.CreateObject ("ADODB .RecordSet") 
sqlstr="select * from student info" 

rs.open sqlstr,conn,1,3 

"添加 记录 

student id=Request.Form("student id") 

student name=Request.Form("student name") 

student sex=Request.Form("student sex") 

student age=Request.Form("student age") 

student origin=Request.Form("student origin") 

student profession=Request.Form("student profession") 
rs.AddNew 

rs("stu id")=student id 

rs("stu name")=student name 

rs("stu sex")=student sex 

rs("stu age")=student age 

rs("stu origin")=student origin 

rs("stu profession")=student profession 

rs.Update 

' 数 据 库 中 的 表 以 表格 形式 输出 

Response .Write ("<center>") 

Response .Write ("<h3> 信 息 工程 学 院 083 班 学 生 信息 表 </h3>") 


Dimi 


Response.Write("<table Border=1 BorderColor=black cellSpacing=0 align=center><tr>") 


For i=0 To rs.Fields.Count-1 
Response.Write("<td>" & rs(i).Name & "</td>") 
Next 
Response.Write("</tr>") 
rs.MoveFirst 
Do While NOT rs .EOF 
Response.Write("<tr>") 
For i=0 To rs.Fields.Count-1 
Response.Write("<td>" & rs(i) &g "</td>") 
Next 
Response.Write("</tr>") 
rs.MoveNext 


Loop 
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'Recordset 的 关闭 
rs.Close 

Set rs=Nothing 
"数据 库 的 关闭 
conn.Close 

Set conn=Nothing 
务 > 

</body> 

</html> 


(5) 浏览 器 显示 效果 如 图 9-32 所 示 。 


图 9-32 添加 记录 之 后 表 的 内 容 


4. 删除 记录 (9-5-4. htm 和 9-5-4. asp) 


(1) 9-5-4. htm 文件 的 代码 如 下 : 


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
org/TR/xhtml1/DTD/xhtmll- transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title> 删 除 记录 < /title> 

</head> 

<body> 

<h3> 删 除 记 录 </h3> 

<hr/> 

<form id="forml" name= "forml" method= "post" action="9-5-4.asp"> 


<1label> 请 输入 要 删除 学 生 的 姓名 : 
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<input type="text" name="delete name" id="textfield"/> 
</label> 
<p> 
<label> 
<input type="submit" name="button" id= "button" value= "提交 "/> 
</label> 
<label> 
<input type="reset" name= "button2" id="button2" value=" 重 置 "/> 
</label> 
</p> 
</form> 
<p> gnbsp;</p> 
</body> 
</html> 


(2) 浏览 器 显示 效果 如 图 9-33 所 示 。 


删除 记录 


请 输入 要 出 除 学 生 的 姓名 ， 


人 本 地 Intranet | 保护 模式 : 禁用 入 、 甩 100% ~ 
图 9-33 删除 记录 
(3) 9-5-4. asp 文件 的 代码 如 下 : 


<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> 


< IDOCTYPE HTML PUBLIC "~-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3. 


org/TR/html4/loose.dtd"> 
<html> 


<head> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 


<title> 数 据 库 访 问 < /title> 

</head> 

<body> 

< 

"数据 库 的 连接 和 打开 

Set conn=Server.Createobject ("ADODB .Connection") 
"connstrl 和 connstr2 两 种 方法 任 选 一 种 即 可 


'connstrl="Provider=Microsoft .Jet .OLEDB.4.0;Data Source= 
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"&Server.MapPath ("student 083.mdb") 

connstr2="DRIVER= {Microsoft Access Driver (* .mdb)};DBQ= 
"&Server.MapPath ("student 083.mdb") 

conn.Open connstr2 

delete name=Request .Form("delete name") 

delete name=Trim(delete name) 

"建立 RecordSet 对 象 

Set rs=Server.CreateObject ("ADODB .RecordSet") 


sqlstr="select * from student info where stu name='"&delete nameg"'" 
rs.open sqlstr,conn,l1,3 
if NOT rs.EOF then 
Response.Write ("姓名 为 : "&Request .Form ("delete_ name")&" 的 记录 已 经 被 删除 !") 
Response.Write("<hr>") 
rs.delete 
rs.update 
rs.close 
sqlstr="select * from student info" 
rs.open sqlstr,conn,1,3 
"数据库 中 的 表 以 表格 形式 输出 
Response.Write("<center>") 
Response.Write ("<h3> 信 息 工 程 学 院 083 班 学 生 信息 表 < /h3>") 
Dimi 
Response .Write("<table Border=1 BorderColor=black cellSpacing=0 align=center> 
过 
For i=0 To rs.Fields.Count-1 
Response.Write("<td>" & rs(i).Name & "</td>") 
Next 
Response.Write("</tr>") 
Do While NOT rs .EOF 
Response .Write ("<tr>") 
For i=0 To rs.Fields.Count-1 
Response.Write("<td>" & rs(i) & "</td>") 
Next 
Response.Write ("</tr>") 
rs.MoveNext 
Loop 
Else 
Response.Write ("您 输入 的 学 生 姓 名 : "gdelete _nameg" 不 存在 ,请 返回 重新 输入 !") 
End if 
'Recordset 的 关闭 
rs.Close 
Set rs=Nothing 
"数据 库 的 关闭 


conn.Close 
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Set conn=Nothing 
名 > 

</body> 

</html> 


(4) 删除 记录 不 成 功 时 浏览 器 的 显示 效果 如 图 9-34 所 示 ( 即 要 删除 的 记录 不 存在 ) 。 


文件 (站 ”篇 纺 (E) 查看 V) 收藏 夫 (A) 工具 (T 帮助 (H) 


上 安生 访 问 


您 输入 的 学 生 姓名 : 马 不 存在 ， 请 返回 重新 输入 ! 


入 本 地 Intranet | 保护 模式 : 禁用 本 ~ 有 戌 100%6 ~ 


图 9-34 删除 记录 不 成 功 


(5) 删除 记录 成 功 时 浏览 器 的 显示 效果 如 图 9-35 所 示 。 


姓名 为 ， 马 仲 的 记录 已 经 被 删除 ! 


信息 工程 学 院 083 班 学 生 信 息 表 


zoloosood| B 活 | 妇 | 19 | 未 | 
[oloos007| 主页 | 20 | 网 责 | 网 用 工程 | 


9-35 删除 记录 成 功 


9.5 本 章 小 结 


数据 库 技 术 是 动态 网 站 建设 的 重要 内 容 , 可 以 将 收集 的 用 户 信息 存储 下 来 ,以 便 进 
一 步 加 工 处理 或 经 常 显示 在 网 页 中 ,如 新 闻 系 统 、 调 查 系统 、 留 言 板 、 论 坛 .购物 系统 等 。 
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本 章 首 先 简单 介绍 了 数据 库 的 基础 知识 ,然后 以 实例 的 方式 介绍 了 在 Access 中 如 何 
进行 数据 库 的 规划 和 创建 ,接着 介绍 了 三 种 连接 数据 库 的 方式 ,最 后 介绍 了 如 何 通 过 
ADO 组 件 中 的 Connection 对 象 .Command 对 象 和 Recordset 对 象 访 问 数据 库 ,并 且 进 行 
了 实例 说 明 。 

数据 库 访 问 这 一 部 分 的 内 容 比较 多 ,而 且 在 实际 开发 过 程 中 还 要 考虑 安全 、 健 壮 等 
诸多 因素 ,因此 还 需要 用 户 在 实际 应 用 中 进一步 熟练 和 加 强 。 


9.6 马 题 
一 、 填空 题 
1. 常用 的 数据 模型 有 ; 和 三 类 。 
2. ODBC 是 英文 的 缩写 , 即 “开放 数据 库 互 连 ” 的 意思 。 
3. ADO 组 件 中 最 常用 的 三 个 对 象 分 别 是 对 象 、 对 象 和 
对 象 。 
二 、 简 答 及 实 训 题 


1. 什么 是 数据 库 ? 数据 库 有 哪些 特点 ? 
2. 编写 代码 实现 一 个 简单 的 留言 板 系统 ,系统 运行 时 的 主页 面 、 管 理 员 登录 页 面 和 
管理 员 登 录 之 后 的 主页 面 分 别 类 似 于 图 9-36、 图 9-37 和 图 9-38 。 


台式 一 下 留言 板 系统 。 


2010/10/11 10:38:18 留言 


站 长 回 夏 ; 古 谢 而 试 。 
工 塘 下 本 程序 HI 
本 留言 板 管理 员 登 录 的 默认 密码 是 “dnlt”。 


2010/4/15 9:19:48 留言 


站 长 回复 -欢迎 名 这 
1 下 一 页 


全 本 地 Intranet | 保护 楼 式 : 榴 用 入 > 用 100%6 > | 


图 9-36 系统 主页 面 
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测 式 一 下 留言 柏 系 统 。 


2010/10/11 10:38-16 留言 


ET 


1 十 rf# 和 麻 汪 1 
本 留言 板 管 理 负 登 录 人 | 认 密码 是 “dnlt”。 
2010/4/15 9:19:48 留 宙 


站 长 回复 ;欢迎 留言 


图 9-38 管理 员 登 录 之 后 的 主页 面 


re 
“北京 奥运 吉祥 物 一 一 福娃 ” 
网 站 的 动态 设计 


在 第 4 章 中 ,已 经 开发 出 静态 的 “北京 奥运 吉祥 物 一 福娃 ?网 站 ,但 是 其 不 但 缺少 
交互 功能 ,而 且 管理 和 更 新 也 不 方便 。 因 此 ,在 本 章 中 ,将 对 "北京 奥运 吉祥 物 一 一 福娃 ” 
网 站 进行 动态 设计 与 开发 ,主要 是 开发 一 个 投票 调查 子 系统 、 一 个 栏目 为 “福娃 感言 “的 
留言 板子 系统 和 一 个 栏目 为 “福娃 动态 ”"“ 精 彩 图 片 " 和 “名 人 说 福娃 ”的 带 分 类 显示 的 内 
容 管 理子 系统 ,动态 设计 之 后 的 网 站 首页 如 图 10-1 所 示 。 从 而 让 读者 对 动态 网 站 的 设计 
和 开发 有 一 个 系统 全 面 的 认识 ,并 且 掌 握 动 态 网 站 的 规划 和 设计 流程 。 


BMR rm Ee 
te 
ET 
直下 
tno a tom ge il 


To 
0] 


10-1 动态 设计 之 后 的 网 站 首页 
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10.1 授 票 再 查 子 系统 


10.1.1 功能 说 明 
票 调查 子 系统 用 来 实现 网 站 与 用 户 之 间 的 基本 互动 ,帮助 网 站 管理 员 收 集 用 户 浏 


览 “ 北 京 奥运 吉祥 物 福娃 ”网 站 的 感受 及 意见 建议 等 信息 ,从 而 进一步 对 网 站 进行 改 
进 和 升级 ,投票 调查 子 系统 的 功能 结构 图 如 图 10-2 所 示 。 
进行 投票 
普通 用 户 | 
子 查看 结果 一 | 添加 主题 
改 修改 用 户 名 主题 管理 修改 主题 
i 和 密码 
用 户 删除 主题 
投票 管理 
| 添加 选项 
投标 选项 | | 修改 选项 
[| 删除 选项 


图 10-2 投票 调查 子 系统 的 功能 结构 图 


10.1.2 系统 规划 
1. 文件 规划 
根据 功能 结构 需求 ,投票 调查 子 系统 中 需要 的 文件 相关 信息 如 表 10-1 所 示 。 
表 10-1 投票 调查 子 系统 的 文件 规划 


序 号 文 件 名 功能 说 明 
1 admin. asp 后 台 主 页 右 侧 默认 页 面 
2 admin_additem. asp 添加 主题 
3 admin_addvote. asp 添加 投票 选项 
4 admin_admin. asp 修改 管理 员 用 户 名 和 密码 
5 admin_delitem. asp 删除 主题 
6 admin_delvote. asp 删除 投票 选项 
有 admin_edititem. asp 修改 主题 
8 admin_editvote. asp 修改 投票 选项 
9 admin_index. asp 后 台 主 页 
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续 表 

序 号 文 件 名 功能 说 明 

10 admin_item. asp 投票 选项 管理 

11 admin_left. asp 后 台 主 页 左 侧 功能 菜单 页 面 

12 admin_login. asp 管理 员 后 台 登 录 

3 admin_vote. asp 主题 管理 

14 conn. asp 链接 数据 库 

15 C3 C53 样式 表 文 件 

16 db. asp 数据 库 ( 为 了 安全 ,将 文件 扩展 名 . mdb 改 为 . asp) 

17 quit. asp 退 ee 登录 

18 view. asp 票 结果 显示 页 面 

19 vote. asp i 

20 voteindex. asp 输出 静态 投票 调查 页 面 

2. 数据 库 规 划 


(1) 只 有 一 个 数据 库 ,其 名 称 为 db. asp( 为 了 安全 ,将 文件 扩展 名 . mdb 改 为 . asp) 。 

(2) 数据 库 中 有 三 个 关系 表 : 用 户 信息 表 v_login, 投 票 主题 表 v_title, 投票 选项 表 
V_vote。 

(3) i 户 信 息 表 v_login 的 结构 如 表 10-2 所 示 , 投票 主题 表 v_title 的 结构 如 表 10-3 
所 示 ， 选项 表 v_vote 的 结构 如 表 10-4 所 示 。 


7 10-2 用 户 信息 表 


字段 名 称 数据 类 型 说 明 


本 二 下 号 pas 文本 密码 
文本 人 


表 10-3 投票 主题 表 


字段 名 称 i 字段 名 称 数据 类 型 说 明 
id 自动 编号 times 日 期 /时 间 最 后 一 次 投票 时 间 
title :是 brstr 数字 分 几 行 显 示 
types 


表 10-4 投票 选项 表 


字段 名 称 | 数据 类 型 说 明 
cont 投票 选项 内 容 
投票 选项 所 对 应 主题 的 ID |‖ vcount 本 投票 选项 的 投票 数 


10.1.3 系统 设计 
通过 需求 分 析 画 出 系统 的 功能 结构 图 以 及 完成 文件 规划 和 数据 库 规 划 后 以 进 
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行 具体 的 系统 设计 了 ,在 设计 过 程 中 也 可 以 多 人 分 工 协作 ,共同 完成 子 系统 的 整体 开发 。 
下 面 仅 介绍 系统 中 的 一 些 关 键 页 面 。 
(1) 投票 页 面 ,普通 用 户 可 以 直接 在 首页 中 选中 相关 的 投票 选项 ,然后 单 击 * 投 票 按 
钮 进行 投票 ,如 图 10-3 所 示 。 


1 精彩 图 片 ] 更 多 [ 吉 人 福娃] 更 多 六 投票 油 查 wore 


由:t 床 虽 运往 信 园 笨 拆 院 理 林 等 估 后 加 万 民 开 .… “名 人 天 识 名 你 关 王 “北京 罗 运 吉 评 御 - 福 姓 ” 网 
“福娃 乐 加 将 换 主题 “奥运 声 祥 物 终于 证 生 巡 州 名 人 说 “福娃 ” 站 在 以 i ) 曾 存在 不足 


“奥运 六 烽 ” 六 攻 博 虹 失 生计 宝 曾经 历 大 地 震 . “《 神 娃 有 到 外 开花 玉 视 名 人 争 陵 袁 十 月 央视 扼 ，. 加 4 信息 内 容 
* 世博 会 国 与 村 沪 开 张 “与 运 慷 粒 ” 齐 击 街 “奥运 福 姓 设计 者 韩美林 助 推 运河 中 于 回 p: 互动 功能 
“奥运 把 含 品 千足 生 神 圭 真 然 发 天 “ “看 寻 之 父 ” 幕 美 朵 艺术 壕 折 落户 突 兰 bs 网 c: 功能 设置 
“网 上 北京 包 ! 福 糙 、 海 宝 负 您" 这" 胡 且 “ 季 冰 冰 甩 尼斯 临 名 换 闪 设计 师 衣 于 表 < 回 b: 界面 设计 


“ 家 家 悦 慨 心 莱 坊 及 “ 注 姓 ”电信 杨 正 权 捐 要 心 ,。 “李冰 冲 威 尼斯 嘉 “ 福 村" 称 没 宅 " 青 花 资 " 跟 范 水 [E24 
“中 和 了 琶 到 心 “ 介 标 ” 守 月 包 理 农民 工 欢度 中 秘 . “北京 2008 手 策 29 陋 号 元 会 吉 宦 牧 一 入 畦 

“ 北京 对 世界 的 三 情 迪 请 “北京 欢迎 你 ” “北京 2008 年 第 29 帮 奥运 会 吉祥 区 一 塌 娃 列 试 

“ 往 姓 是 五 十 可 要 的 亲密 小 伙伴 “ 福 疆 是 北京 2008 年 第 29 医 奥运 会 吉祥 移 


硕 权 所 有 : 风云 龙 堵 视 创 作 工作 室 | 联系 我 们 
电话 ; 0931-T691090,， QQ:395259631 


地 址 : 甘肃 省 兰州 币 安 宁 区 三 外 城 而 李 院 入 息 工程 学 院 ， 邮编 : 730070 


10-3 ”进行 投票 


(2) 投票 结果 查看 页 面 ,普通 用 户 在 投票 前 后 都 可 以 通过 在 首页 中 单 击 “查看 ”按钮 
查看 投票 结果 ,如 图 10-4 所 示 。 


您 觉得 “北京 奥运 吉祥 物 = ”网 站 在 以 下 哪些 方面 存在 不 3 


目前 共有 14 人 参与 了 投票 
A: 信息 内 容 


B: 互动 功能 杀 
C5: 功能 设置 至 
D: 界面 设计 ! 嘲 


10-4 查看 投票 结果 


(3) 管理 员 后 台 投票 主题 管理 页 面 , 如 图 10-5 所 示 。 
(4) 管理 员 后 台 投 票选 项 管理 页 面 ,如 图 10-6 所 示 。 
(5) 管理 员 后 台 添加 投票 主题 页 面 , 如 图 10-7 所 示 。 
(6) 管理 员 后 台 添加 投票 选项 页 面 , 如 图 10-8 所 示 。 
(7) 管理 员 后 台 用 户 名 和 密码 修改 页 面 ,如 图 10-9 所 示 。 
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查看 已 有 的 投票 


图 列 投票 名 称 | aa | 调用 代码 
feik Mf 


Wy “北京 内 运 吉祥 槐 -福娃 ” 
网 站 在 以 下 哪些 方面 存在 不 足 ? 


aspTid9 /seri | 


如 


4 GIT EY [CC 


投票 项 目 搞 行 


图 10-7 添加 投票 主题 页 面 
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图 10-9 用 户 名 和 密码 修改 页 面 


10.2 慷 言 板子 系统 


10.2.1 功能 说 明 


留言 板子 系统 用 来 实现 网 站 管理 员 与 用 户 之 间 的 交流 与 互动 ,用 户 通过 留言 板子 系 
统 直接 在 网 站 上 留言 ,如 提出 问题 或 要 求 .管理 员 可 以 进行 在 线 回复 ,帮助 管理 员 收 集 用 
户 反馈 的 信息 ,留言 板子 系统 的 功能 结构 图 如 图 10-10 所 示 。 


10.2.2 系统 规划 


1. 文件 规划 
根据 功能 结构 需求 ,留言 板子 系统 中 需要 的 文件 相关 信息 如 表 10-5 所 示 。 
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浏览 留言 
普通 用 户 
表 留 言 
子 留 
系 言 
统 板 
系统 管理 
管理 员 回复 修改 
用 户 留言 
留言 管理 
删除 留言 


10-10 留言 板子 系统 的 功能 结构 图 


表 10-5 留言 板子 系统 的 文件 规划 


功能 说 明 

aspsql. asp 表单 数据 验证 book_top. asp 前 台 页 面 公共 顶部 
book. css 样式 表 文件 book_write. asp 发 表 留 言 页 面 
book_admin. asp | 留言 板 后 台 管 理 页 面 index. asp 留言 首页 
book_conn. asp 链接 数据 库 md5. asp md5 加 密 代码 
book_down. asp 前 台 页 面 公共 底部 

2. 数据 库 规划 

(1) 只 有 一 个 数据 库 , 其 名 称 为 guestbook. asp( 为 了 安全 ,将 文件 扩展 名 . mdb 改 为 

. asp); 


(2) 数据 库 中 两 个 关系 表 : 留言 板子 系统 配置 信息 表 book_setup, 留言 板子 系统 留 
言 内 容 信息 表 feeback; 
(3) 关系 表 留 言 板 子 系统 配置 信息 表 book_setup 的 结构 如 表 10-6 所 示 ,关系 表 留 
言 板子 系统 留言 内 容 信息 表 feeback 的 结构 如 表 10-7 所 示 。 
表 10-6 ”留言 板子 系统 配置 信息 表 


字段 名 称 i 字段 名 称 说 明 

id View 是 否 需 要 审核 
sitename 网 站 名 称 maxlength 允许 最 长 留言 字符 数 
admin 用 户 名 book jianju 留言 表 间 距 
password 用 户 密码 bad 注 脏话 过 滤 

pages 每 页 显示 多 少 条 留言 |‖ huifutishi 回复 提示 


html 是 否 屏 项 html 代码 huifucolor 回复 颜色 
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表 10-7 留言 板子 系统 留言 内 容 信息 表 


字段 名 称 数据 类 型 i 字段 名 称 说 明 
id 自动 编号 Replayer 回复 人 
UserName 文本 Del 否 是 否 删 除 
Postdate 日 期 /时 间 Online 是 否 在 线 
Replay 备注 卫 了 


ReplayDate 日 期 /时 间 top 留言 固 顶 


10.2.3 系统 设计 


通过 需求 分 析 画 出 系统 的 功能 结构 图 以 及 完成 文件 规划 和 数据 库 规划 后 就 可 以 进 
行 具体 的 系统 设计 了 ,在 设计 过 程 中 也 可 以 多 人 分 工 协作 ,共同 完成 子 系统 的 整体 开发 。 

下 面 仅 介 绍 系统 中 的 一 些 关键 页 面 。 

(1) 普通 用 户 浏览 留言 页 面 ,如 图 10-11 所 示 。 


2008 北 京 岗 运 会 吉祥 狗 三 襄 难 


WHEWMASCOTS OF THE BENING OLYMPIC GAMES=FUWA 


[m.3] 发 表 于 : 2010/10/11 13:43:20 
网 站 美观 大 方 ， 内 容 详 赔 得 当 。 


管理 员 回 复 : 
愿 谢 您 的 支持 。 


[Wo.2] 发 表 于 : 2010/10/11 13:42:36 
网 站 正在 进行 试 运行 ， 请 您 多 提 宝 贵 意见 。 
一 E 
全 本 地 Intranet | 保护 楼 式 : 杖 用 种 ~ 碟 100% > 


10-11 浏览 留言 页 面 


(2) 普通 用 户 发 表 留言 页 面 ,如 图 10-12 所 示 。 
(3) 管理 员 系 统管 理 页 面 ,如 图 10-13 所 示 。 

(4) 管理 员 回 复 修改 留言 页 面 ,如 图 10-14 所 示 。 
(5) 管理 员 删 除 留 言 页 面 ,如 图 10-15 所 示 。 
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Pp -| | x ang 


您 的 姓名 : 


留言 内 容 : 
《200 字 以 内 ) 


及 | 已 完毕 , 但 网 页 上 有 错误 . 


多 本 地 Intranet | 保护 模式 : 全 用 


图 10-12 普通 用 户 发 表 留 言 页 面 


Guan) Coan) Ca 


网 站 名 称 
管理 员 姓 名 。 | adnin 
管理 员 密 码 [并 不 修改 密码 ,请 留 宝 ] 
屏 项 htn] 功 能 。 | 是 加 否 @ [是 否 屏蔽 用 户 留 言 中 的 htnl 代 码 ] 
留言 审核 开关 。 | 是 @ 否 @ [留言 是 否 需要 审核 
留言 内 容 长 度 | 200 | [留言 内 容 的 最 多 字符 数 ,例如 200] 
每 页 留言 条 数 。 |10 | (推荐 10] 
留言 表格 间距 ” |10 ”| 合适 的 间距 可 使 版 面 更 美观 ,推荐 10] 
管理 员 回复 提示 。 。 | 管理 员 回复 [例如 : “客服 回复 ”] 
管理 员 回复 晴 色 。 | 。 | [可 使 用 英文 单词 或 16 进 制 数 ,如 : zed、 
#CCFFOO” ] 


图 10-13 管理 员 系 统管 理 页 面 


入 ” 扫 100% ~ 
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aD) Ces Ca 


留言 日 期 |2010/10/11 13:43:20 
留言 人 姓名 | 用 户 
网 站 美观 大 方 ， 内 容 详 略 得 当 。 


回复 内 容 | 感谢 您 的 支持 。 


是 否 固 顶 | @ 固 质 @ 普通 
是 否 隐藏 ( © 隐藏 @ 公开 


10-14 ”管理 员 回复 修改 留言 页 面 


SD SD SD 


选 | 姓名 内 容 (编辑 与 回复 ) 状态 | 审核 
加 用户。 网站 美观 大 方 ， 内 容 详 略 得 当 。 ma 13:43:20 ”| 已 回复 | 公开 

管理 员 Ps 请 您 多 失主 归 意 |。 2010/10/11 13:42:38 | 新 留言 | 公开 
回 管理 员 Re 网 | 20i0110111 13:41:57 | 新 留言 | 公开 
回 全 选 国 隐 | 


10-15 ”管理 员 删 除 留言 页 面 


10.3 内容 管理 子 系 统 


10.3.1 功能 说 明 


内 容 管理 子 系统 类 似 于 一 个 新 闻 或 文章 发 布 系统 ,管理 员 在 后 台 动 态 地 发 布 、 修 改 、 
删除 新 闻 或 文章 ,然后 在 网 站 首页 或 列表 显示 页 进行 调用 显示 新 闻 或 文章 的 标题 , 单 击 
标题 则 可 以 查看 完整 的 内 容 。 

在 本 网 站 中 , 共 设 计 一 个 数据 库 , 然 后 通过 分 类 调用 的 形式 完成 “福娃 动态 “精彩 
图 片 " 和 “名 人 说 福娃 ”栏目 的 设计 ,内 容 管 理子 系统 的 功能 结构 图 如 图 10-16 所 示 。 


10.3.2 系统 规划 


1. 文件 规划 
根据 功能 结构 需求 ,内 容 管理 子 系统 中 需要 的 文件 相关 信息 如 表 10-8 所 示 。 
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汝 洪 韦 
册 融 内 对 


标题 浏览 添加 类 别 
普通 用 户 门 ] 
内 容 浏览 | 类 别管 理 修改 类 别 
删除 类 别 
内 容 管理 
添加 文章 
铺 贞 用 户 管理 
| 文章 管理 上 一 | 修改 文章 
系统 配置 
一 | 而 除 文章 
10-16 ”内 容 管理 子 系统 的 功能 结构 图 
表 10-8 ”内容 管理 子 系统 的 文件 规划 
文 件 名 功能 说 明 
Admin_Conn. asp 数据 库 链 接 
admin_Css. css 系统 后 台 样 式 表 
AritcleAddSave. asp 保存 文章 修改 信息 
AritcleModifySave. asp 修改 文章 执行 代码 
article. asp( 前 台 ) 内 容 显 示 页 面 
ArticleAdd. asp 添加 文章 
ArticleAddSelClass. asp 选择 文章 类 别 
ArticleDel. asp 文章 删除 
ArticleModify. asp 修改 文章 
ArticleModifylist. asp 修改 标题 列表 
ArticleModSelClass. asp 选择 发 布 文章 类 别 
artplDel. asp 文章 修改 
Check_SqlIn. asp SQL 数据 库 通用 防 注入 程序 
checklogin. asp 检查 登录 信息 
ClassAdd. asp 添加 类 别 
ClassDel. asp 删除 类 别 
ClassManage. asp 类 别管 理 
ClassModify. asp 修改 类 别 
config. asp 系统 参数 传递 
Conn. asp 链接 数据 库 
const. asp 公用 函数 定义 
dir. asp 后 台 首 页 左 侧 显示 页 
dir. inc. asp 后 台 首 页 左 侧 处 理 页 
footer. asp 公共 页 面 底部 
header. asp 公共 页 面 顶部 
index. asp( 前 台 ) 网 站 首页 
index. asp 后 台 首 页 
islogin. asp 判断 是 否 登 录 


面 
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续 表 

序 号 文 件 名 功能 说 明 

29 list. asp( 前 台 ) 标题 列表 

30 list. asp 后 台 右 边 默认 页 面 

31 login. asp 后 台 登 录 页 面 

32 loginout. asp 退出 登录 页 面 

33 md5. asp md5 加 密 代 码 

34 security_code. asp 生成 验证 码 

35 Startup. asp 输出 方式 函数 定义 

36 Style. css 后 台 样 式 表 

37 SuperUser. asp 用 户 管理 

38 SuperUserModify. asp 用 户 密 码 修改 

39 SysSet asp 系统 配置 

40 tab. htm 首页 栏目 调用 模板 

41 tabl. htm 首页 内 容 列 表 调 用 模板 
2. 数据 库 规划 


(1) 只 有 一 个 数据 库 , 其 名 称 为 fw. asp( 为 了 安全 ,将 文件 扩展 名 . mdb 改 为 . asp) 。 

(2) 数据 库 中 有 三 个 关系 表 : 用 户 信息 表 admin、 文 章 信息 表 article 和 类 别 信息 表 
class。 

(3) 关系 表 用 户 信 息 表 admin 的 结构 如 表 10-9 所 示 , 文章 信息 表 article 的 结构 如 
表 10-10 所 示 , 类 别 信息 表 class 的 结构 如 表 10-11 所 示 。 


表 10-9 内容 管 理子 系统 的 用 户 信息 表 


字段 名 称 数据 类 型 字段 名 称 数据 类 型 说 明 
id 自动 编号 ID password 文本 用 户 密码 
admin 文本 用 户 名 


表 10-10 ”内容 管 理子 系统 的 文章 信息 表 


字段 名 称 i 字段 名 称 数据 类 型 说 明 
id addtime 日 期 /时 间 | 添加 时 间 
ClassID 所 属 类 别 ID 号 ‖ hits 数字 点 击 次 数 
ClassName 所 属 类 别名 称 |‖ 6 是 /和 否 是 否 推荐 
title 文章 标题 ispic 是 /和 否 是 否 推荐 图 片 
Keywords 关键 字 picture 文本 标题 图 片 


content 文章 内 容 SavePathFileName | 是 / 否 上 传 文件 路 径 


表 10-11 内 容 管理 子 系统 的 类 别 信 息 表 


字段 名 称 说 明 说 明 
ID 类 别 ID 号 行 数 
ClassName 类 别名 称 字数 
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10.3.3 系统 设计 


通过 需求 分 析 画 出 系统 的 功能 结构 图 以 及 完成 文件 规划 和 数据 库 规划 后 就 可 以 进 
行 具 体 的 系统 设计 了 ,在 设计 过 程 中 也 可 以 多 人 分 工 协作 ,共同 完成 子 系统 的 整体 开发 。 

下 面 仅 介 绍 系统 中 的 一 些 关键 页 面 。 

(1) 普通 用 户 可 以 通过 首页 进行 标题 浏览 ,如 图 10-17 所 示 。 


RT 
A 
ee 
子 ,0 
地 ,中 人 一 


A 人] 后 六 mn。 > 
ite 
mn) (Rl ee) lg) Re) 灵 
天 
mm [有 总 Lr) (8) wee] 
elise) 
FETT FL] 


图 10-17 首页 标题 浏览 


(2) 普通 用 户 可 以 通过 标题 浏览 页 进行 标题 浏览 ,如 图 10-18 所 示 。 


北 训 代 汉 吉 实物- 宣 牧 >) 福 时 二 


和 。 i 
人 on = i 
1 “ 涡 闪 ”重音 已 有 0 二 户 家 讼 名 扩 和 on Er 
和 wr I 
se 
po 于 4 、 RS za 人 
和 4 区 WU 
从 的 这 而 和 了 鱼 ,大 明 拓 区 六 半 ， 闪 于 包 人 下 具 王 的 虽 色 

全 人 提 打车 放生 志 与， 天 胡 ， 至 从 大 吉 二 的 


-站 自 尼 “机 过 过 和 有 迁 站 兰 训 对 允 和 
人 


BE wr 
设计 要 起 

i mma tom ri el a 
让 页 上 -页 Tn Re We: Mi 共生 记 末 25 和 下 /页 fl: 1 Pe 


- 形 委 间 计 风 了 中国 对 统 王 要 方 垃 ， 民 投了 中 国 3 人 立 化 


nn) La er] em] fia] 
bal) 
EE Tr 


10-18 ”标题 浏览 页 面 


(3) 普通 上 
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户 可 以 通过 单 击 标题 方式 浏览 


中 秋 , 捷 个 “证 ” ER 和 


好 一 和 月 本 1， 让 必 人 特 至 ， 这 二 是 束 人 加 时 的 局 于 ， 加 北 
仙人 或 加 半 闪避 当天 到 从 人 果子 手 中 衣 们 未 等 时 加 不 


吕 沪 (记者 天 向 审 关闭 办 
* 国 人 对 姑 分 和 划 。 侣 而， 有 和 
了 下， 从 于 肌 丰 村 与 字面 开罗 
“后 对 等。 地 是 !“ 网 风 适 入 和 


从 可 六， 下 有 的 


寺中 队 " 备 二 > 得 利 了 呆 9 
“到 4 节目 朋 风 ”， 征 央 = 


款 ， 委 中 昌 户口 本 。 导 份 下 及 了 件 员 半生 


图 10-19 ”标题 浏览 页 面 


(4) 管理 员 后 台 登 录 页 面 ,如 图 10-20 所 示 。 


文 #(P 可) 理 看 (V) 收藏 突 IA) 工具 (帮助 IH) 
认 履 二。 | 居 网 后 台 管理 和 起 


台 管 理 胡 


北京 奥运 吉祥 物 一 福娃 三 全 


览 内 容 , 如 图 10-19 所 示 。 


nd 
0 3 下 或 有 诺 并 证 于 
7 
二 0 5、 HI、 失 


(mms) ew) el eal 灵 
[3 
ln a) fs Li [eee] 


a 
on) [8 rs Car) lo) 


EL 


a 人 EPE 3 


CEE TCE 


EEC 。 从- 


图 10-20 


(5) 管理 员 后 台 管 理 主页 ,如 图 10-21 所 示 。 


后 台 登 录 页 面 


(6) 后 台 类 别管 理 页 面 , 可 以 添加 类 别 、 修 改 类 别 和 删除 类 别 , 如 图 10-22 所 示 。 


(7) 添加 文章 页 面 ,如 图 10-23 所 示 。 
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网 站 名 称 。 ”北京 奥运 吉祥 物 -福娃 


网 站 作者 。 ”风云 龙 影视 创作 室 
联系 电话 ， 0931-7601090 


10-21 后 台 管理 主页 


已] httpi/ /localhost/fuwa/admin/index.asp 
文件 (站 妨 坟 (E) 查看 (V) 收藏 赤 A) 工具 (T) 帮助 (H) 
究 | 古训 更 运 襄 衬 牺 福 迁 网 站 管理 的 | 


=| xle si pr 


加 
文章 管理 二 
发 布 文章 | 修了 文章 国生 上 
系统 管理 
类别 管理 。 用 记 管 理 
i 
3 


本 Intranet | 保 六 模式 草 用 。。 硼 虹 100% 。 | 


图 10-22 后 台 类 别管 理 页 面 


图 10-23 ”添加 文章 页 面 
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(8) 修改 文章 页 面 ,如 图 10-24 所 示 。 


| 


发 日 其 :FLOo 当期 日 其 为 : 2010J10/12 
修 琴 重 写 = 
全 不 地 Intranet | 保 式 可 月 而 six - | 


10-24 ”修改 文章 页 面 


(9) 删除 文章 页 面 ,如 图 10-25 所 示 。 


BE) hetpy//iocalhosUfuwa/admin/index ssp 四 四 四 [CE 四 


管理 首页 | 恕 出 ms 标题 浏览 孝 日 其 操作 
厂 “ 订 。 吉 人 六 福村 1 anto7io0 fk 放 

文章 管理 厂 716 。 二 直 衬 物 终于 证 生 温州 名人 说 “ 扩 桂 ” 1 20t01i0711 fab 而 从 

发 布 文章 | 修文 章 厂 Ti5 。 改 对 》 到 直 开 影视 名 人 争 本 声 十 月 由 视 扫 答 1 2010110111 fi 而 这 
厂 Ti0 。 奥运 竺 设计 省 韩美林 且 推 运河 申 吐 1 nlo/lo/ 。 从 下 出 疙 

系统 管理 | 汪 、， 本 二 二 过 1 2010/10/11 人 Rh 出 论 

天 别管 理 。 用 户 管理 厂 。 ?06 。 用 水 上 尼斯 必 角 接著 设计 师 解 二 青花 冯 福 村 1 20l011011 。 位 玫 是 半 

系统 设置 厂 ?704 和 OH 忆 斯" 放 村 ” 称 生字- 青 开 这 "名 范冰冰 流 关 系 1 2010/10/11 。 fk 出 条 
厂 。 299 北京 2008 年 间 29 夺 生计 会 二 实 折 一 肖 纤 4 010/40/ 。 人 量 这 
厂 26 。 北京 2ona 和 和 29 必 四 运 全 十 衬 物 一 福 疆 到 放 ato1io1l 人 
厂 287 福星 北京 2008 年 za 攻略 运 人 吉祥 物 3 zolo/lo/l fk 几 
厂 全 过 | 批 里 mp | 


首页 上 一 页 下 一 页 尾 页 页 次 : 1/1 页 共 10 条 记录 25 条 记录/ 页 转 到 : | cote 


全 本 地 Intranet | 保护 楼 式 : 苦 用 和 ~ 级 100% ~ 


10-25 ”删除 文章 页 面 


(10) 用 户 管理 页 面 ,如 图 10-26 所 示 。 
(11) 系统 配置 页 面 ,如 图 10-27 所 示 。 
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已] http://localhost/fuwa/admin/index 3sp -|| x eng pr 


wea | a 
ID 号 用 户 名 Li WA 

文章 管理 3 nin 候 光 玫 码 LL 

发 布 文章 | 修改 文章 

系 绞 管 理 活用 户 

类 别管 理 。 用 户 管理 用 户 各 : [| 

人 EE i 

提交 ] 间 | 重要 | 

成 全 本 地 Intranet | 全 ?模式 : 看 用 往 - 想 100% ~ 


图 10-27 系统 配置 页 面 


10.4 本 章 小 结 


本 章 主要 是 通过 ASP 十 Access 的 方式 对 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 进行 了 动 
态 设计 与 开发 。 其 一 ,设计 了 一 个 投票 调查 子 系统 ;其 二 ,为 “福娃 感言 "栏目 设计 了 一 个 
留言 板子 系统 ;其 三 ,为 “福娃 动态 “精彩 图 片 " 和 “名 人 说 福娃 ”栏目 设计 了 一 个 分 类 显 
示 的 内 容 管 理 系统 。 

通过 本 章 的 讲解 ,使 读者 掌握 动态 网 站 的 规划 和 设计 流程 ,以 及 一 个 实际 应 用 的 系 
统 的 开发 细节 。 
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实 训 题 


参照 “北京 奥运 吉祥 物 一 一 福娃 ”网 站 的 动态 设计 ,承接 5. 9 习题 中 简 答 及 实 训 题 第 
1 小 题 ,进行 网 站 的 动态 设计 。 要 求 : 

(1) 网 站 具有 新 闻 管 理子 系统 ; 

(2) 网 站 具有 投票 调查 子 系统 ; 

(3) 网 站 具有 留言 板子 系统 。 
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网 页 特效 设计 


11.1 JavaScript 概 录 


网 页 特效 是 用 程序 代码 在 网 页 中 实现 特殊 效果 或 者 特殊 功能 的 一 种 技术 , 它 为 网 页 
活跃 了 气氛 ,增加 了 网 站 的 亲和力 。 目 前 在 网 页 设计 中 常用 的 网 页 特效 有 CSS 特效 、 
JavaScript 特效 ,Flash 特效 和 HTML 特效 等 ,但 是 相 比较 而 言 ,JavaScript 特效 的 功能 
更 加 强大 ,所 以 下 面 就 以 JavaScript 为 例 介 绍 网 页 特效 的 制作 方法 。 

JavaScript 是 一 种 能 让 网 页 更 加 生动 活泼 的 描述 语言 ,也 是 目前 网 页 设计 中 最 容易 
学 又 最 方便 的 语言 。 利 用 JavaScript 可 以 在 不 涉及 服务 器 的 情况 下 直接 通过 HTML 界 
面向 用 户 收集 一 定 的 数据 ,可 以 根据 用 户 的 输入 立即 更 新 页 面 上 的 组 件 , 可 以 为 图 形 增 
添 交 互 性 等 。 可 以 说 ,掌握 JavaScript 脚本 语言 编程 方法 就 是 获得 一 项 重要 的 网 页 设计 
技能 。 


11.1.1 JavaScript 的 特点 


JavaScript 是 一 种 被 徐 入 HTML 网 页 之 中 的 基于 对 象 和 事件 驱动 编程 的 脚本 语言 ， 
它 弥 补 了 HTML 语言 交互 功能 差 控制 呆板 单调 等 缺陷 。 脚 本 是 一 段 用 来 完成 某 些 特 
殊 功 能 的 程序 ,脚本 程序 可 分 为 服务 器 端 脚本 (如 ASP、JSP 等 ) 和 客户 端 脚 本 (如 
JavaScript 等 ) 两 类 。 客 户 端 脚 本 程序 随 网 页 同时 下 载 到 客户 机 上 ,网 页 对 用 户 数据 的 验 
证 和 对 用 户 的 响应 ,都 无 须 通 过 服务 器 进行 通信 ,从 而 降低 了 网 络 数 据 的 传输 和 服务 器 
的 负荷 。 

JavaScript 是 Netscape 公司 于 1995 年 11 月 酝酿 开发 的 ,最 早 叫做 LiveScript, 它 结 
构 简 单 ,使 用 方便 ,对 用 户 的 知识 水 平 要 求 不 高 , 相 比 Sun 公司 的 Java 来 说 要 易学 易 懂 。 
Java 是 一 种 适合 分 布 式 计算 的 新 型 面向 对 象 程 序 设计 语言 ,功能 强大 ,但 十 分 复杂 ,更 适 
合 有 一 定 程序 设计 经 验 的 人 使 用 。JavaScript 的 整个 语法 以 Java 为 基础 ,但 比 Java 简 
单 。1995 年 12 月 ,两 家 公司 达成 协议 将 LiveScript 正式 更 名 为 JavaScript。 目 前 ,IE 等 
主流 浏览 器 均 支 持 JavaScript。 

JavaScript 的 特点 如 下 : 

(1) JavaScript 是 一 种 脚本 编程 语言 ,采用 小 程序 段 的 方式 实现 编程 . 它 是 由 一 些 
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ASCII 字符 构成 的 ,可 以 直接 用 记事 本 等 文本 编辑 器 编写 ,事先 也 不 用 编译 ,只 需要 利用 
解释 器 就 可 以 解释 执行 。 同 时 它 也 是 一 种 解释 性 语言 ,提供 了 一 个 简易 的 程序 开发 过 
程 ,方便 用 户 的 使 用 操作 。 

(2) JavaScript 是 一 种 基于 对 象 和 事件 驱动 的 语言 。 它 能 通过 操作 一 些 已 有 的 对 象 
而 引导 程序 运行 ,许多 功能 来 源 于 对 象 之 间 的 相互 作用 。 它 对 用 户 的 响应 ,是 采用 事件 
驱动 的 方式 进行 的 。 所 以 也 可 以 把 JavaScript 看 做 是 一 种 面向 对 象 的 语言 。 

(3) JavaScript 的 简单 性 。 它 的 简单 性 一 方面 体现 在 它 是 一 种 基于 Java 的 基本 语句 
和 控制 流 之 上 的 简单 而 紧凑 的 设计 ,这 对 于 学 习 Java 是 一 个 非常 好 的 过 渡 , 另 一 方面 是 
它 的 所 有 变量 不 使 用 严格 的 数据 类 型 。 

(4) JavaScript 的 安全 性 。 它 同 Java 一 样 是 一 种 非常 安全 的 语言 , 它 不 允许 访问 本 
地 硬盘 ,并且 不 允许 把 数据 存 人 到 服务 器 上 ,还 不 允许 对 网 络 文档 进行 修改 和 删除 ,只 多 
许 通 过 浏览 器 实现 信息 浏览 或 动态 交互 ,从 而 有 效 地 防止 数据 丢失 。 

(5) JavaScript 的 动态 性 。 它 的 动态 性 体现 在 它 可 以 直接 对 用 户 或 客户 的 输入 操作 
做 出 响应 ,而 不 必 经 过 Web 服务 器 或 Web 服务 器 程序 。 

(6) JavaScript 具有 跨 平台 性 。JavaScript 同 Java 一 样 是 与 操作 环境 无 关 的 , 它 只 依 
赖 于 浏览 器 ,只 要 有 运行 支持 JavaScript 的 浏览 器 就 能 正确 解释 执行 。 


11.1.2 ” JavaScript 的 功能 


JavaScript 的 功能 主要 体现 在 以 下 几 个 方面 : 

(1) 控制 文档 的 外 观 和 内 容 : 通过 JavaScript 程序 ,可 以 控制 Web 页 面 的 外 观 , 也 能 
评估 用 户 输入 数据 的 有 效 性 ,而 且 这 些 操作 都 无 须 与 服务 器 进行 交互 ,从 而 减轻 了 服务 
器 的 负担 。 

(2) 控制 浏览 器 的 行为 : JavaScript 程序 也 能 检测 用 户 计算 机 是 否 安装 了 某 些 插件 ， 
并 在 需要 时 能 够 从 相应 的 站 点 上 下 载 所 需要 的 插件 。 

(3) 与 用 户 交互 : JavaScript 程序 可 用 于 检测 用 户 的 活动 ,并 对 用 户 操作 作出 反应 ， 
例如 当 光 标 经 过 某 个 链接 时 ,该 链接 变 成 另 一 种 颜色 ,就 是 对 用 户 操作 的 一 种 反应 形式 。 

(4) 使 用 Cookie 读 写 客户 端的 状态 : JavaScript 还 能 写 人 和 读 取 Cookie 值 , 并 根据 
具体 的 Cookie 值 动态 地 创建 HTML 页 面 。 

(5) JavaScript 提供 了 字符 串 处 理 函 数 和 正则 表达 式 支 持 , 利 用 它们 ,可 以 检查 电子 
邮件 、 网 络 地 址 \ 信 用 卡号 码 、 手 机 号 码 、 身 份 证 号 码 等 的 有 效 性 。 

(6) JavaScript 是 一 种 解释 性 程序 , 它 提供 了 变量 .数据 类 型 .条 件 语句 、 循 环 语句 、 
函数 .对象 等 一 组 基本 的 语言 构件 块 。 通 过 这 些 构件 块 ,能 完成 数学 计算 .操作 日 期 和 时 
间 、 分 析 字 符 串 .操作 数组 和 对 象 等 功能 。 

当然 JavaScript 也 不 是 万 能 的 , 它 受 限于 与 浏览 器 和 HTML 相关 的 任务 ,并 在 受 限 
制 的 上 下 文 环 境 中 使 用 ,因此 ,JavaScript 不 具备 独立 语言 (如 C++ .JAVA、VB) 所 拥有 
的 一 些 必需 特性 。JavaScript 不 具备 以 下 特性 : 

(1) 除了 能 够 格式 化 和 显示 HTML 文档 之 外 ,JavaScript 不 具备 有 任何 的 图 像 处 理 
能 力 。 


5 全 = 网 页 特效 设计 307 


(2) 出 于 安全 方面 的 原因 ,客户 端的 JavaScript 不 允许 读 写 文件 。 

(3) 除了 能 够 让 浏览 器 下 载 任何 URL 指定 的 内 容 外 ,JavaScript 不 支持 任何 网 络 访 
问 功能 。 

(4) JavaScript 不 具备 任何 多 线程 能 力 。 


11.2 ”在 网 页 中 使 用 JavaScript 的 方法 


在 网 页 中 使 用 JavaScript 的 方法 主要 有 如 下 三 种 : 
1. 将 脚本 代码 直接 放 在 二 script 王 二 /script 二 标记 之 间 


在 HTML 文档 中 ,可 以 直接 加 入 JavaScript 的 脚本 代码 ,使 之 成 为 文档 的 一 部 分 。 
其 格式 如 下 : 


<script language="JavaScript"> 
JavaScript 语言 代码 ; 


</script> 


因为 使 用 的 脚步 本 语言 是 JavaScript, 所 以 属性 language 要 给 定 "JavaScript”" 值 。 多 
条 JavaScript 语句 定义 放 在 二 script 二 一 /script 二 之 间 , 一 script 二 一 /script 二 的 位 置 是 
不 固定 的 ,可 以 出 现在 二 head 盖 一 /head 二 或 二 body 二 二 /body 二 中 的 任何 地 方 , 但 通常 
将 它 加 于 二 head 之 二 /head> 标 记 之 间 。 

这 种 直接 在 HTML 中 加 入 JavaScript 的 方法 适合 小 型 网 站 的 网 页 设计 。 但 如 果 要 
将 某 段 JavaScript 代码 应 用 到 另 一 个 网 页 中 时 .就 必须 在 该 网 页 中 再 次 重 写 或 复制 ,因此 
这 种 方法 不 利于 代码 的 重复 利用 和 后 期 维护 。 

2. 将 JavaScript 代码 放 在 一 个 单独 的 文件 中 

为 了 便于 JavaScript 代码 的 重复 利用 ,可 以 将 需要 重复 利用 的 代码 保存 在 扩展 名 为 
.js 的 文件 中 ,车 多 个 HTML 文件 需要 引用 该 代码 ,只 需 在 HTML 文件 中 将 该 .js 文件 


引入 即 可 ,引入 时 使 用 script 标记 的 src 属性 指定 该 外 部 脚本 文件 的 URL 路 径 即 可 。 其 
格式 如 下 : 


<head> 
<script type="text/javascript" src=" 脚 本 文件 名 .js"></script> 


</head> 


属性 type 二 "text/javascript" 指 出 了 文件 的 类 型 是 JavaScript, 而 src 属性 则 定义 欲 
引用 的 外 部 脚本 文件 (.js) 的 URL。 
通过 与 外 部 脚本 文件 相 链 接 , 浏 览 器 只 使 用 外 部 文件 的 脚本 ,同时 忽略 任何 位 于 
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过 script 之 过 /script 记 之 间 的 脚本 。 脚 本 文件 的 编辑 也 很 简单 ,任何 文本 编辑 器 均 可 进行 
编辑 ,文件 内 容 是 脚本 ,不 包含 HTML 的 标记 。 


3. 将 脚本 代码 作为 属性 值 


为 了 响应 输入 的 事件 ,可 以 在 HTML 表单 的 input 标记 内 添加 脚本 。 例 如 ,对 于 
Button 表单 元 素 , 可 以 设置 一 个 新 的 属性 onclick, 而 onclick 的 属性 值 就 是 一 段 
JavaScript 程序 代码 , 当 单 击 这 个 按钮 后 ,onclick 属性 值 中 的 JavaScript 代码 就 会 被 浏览 
器 解释 执行 。 如 下 所 示 : 


<input type=button value= 测 试 脚本 onclick="alert (new Date () ) ; "> 


另外 , 超 链接 标记 二 a 二 的 href 属性 值 除了 可 以 使 用 http 和 mailto 等 协议 外 ,还 可 
以 使 用 JavaScript 协议 ,如 下 所 示 : 


<a href="JavaSscript:alert (new Date ());"> Javascript 协议 </a> 


当 单 击 这 个 超 链接 时 ,浏览 器 会 执行 “JavaScript: "后面 的 脚本 代码 。 


11.3 ” JavaScript 的 基本 语法 


11.3.1 常量 


1. 整 型 常量 


整 型 常量 可 以 使 用 十 六 进 制 八进制 和 十 进 制 表示 。 十 六 进 制 以 0x 或 0X 开头 ,如 
0x54af。 八 进 制 以 0 开头 ,如 076。 十 进 制 的 第 一 位 不 能 是 0, 如 154。 


2. 实 型 常量 
由 整数 部 分 和 小 数 部 分 组 成 ,也 可 以 用 指数 形式 表示 ,如 一 1.21 和 4e3 等 。 
3. 逻辑 常量 


逻辑 常量 只 有 两 种 状态 ,true 和 false。jJavaScript 表示 人 逻辑 常量 只 能 用 true 或 
false, 不 能 用 1 或 0。 


4. 字符 串 型 常量 


使 用 单 引 号 (“?) 或 双 引 号 (“”) 括 起 来 的 一 个 或 几 个 字符 。 如 “this is a good idea”、 
“abc”、“a” 等 。 一 个 字符 串 中 也 可 以 不 包含 任何 字符 ,其 形式 为 “”, 表 示 一 个 空 


5. 室 值 


空 值 null 表示 什么 也 没有 。 如 要 引用 一 个 没有 定义 的 变量 , 则 会 返回 一 个 null 值 。 
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6. 转 义 字符 


JavaScript 提供 了 如 表 11-1 所 示 的 八 种 转 义 字符 ,这 些 字符 都 以 反 斜 杠 (\) 开 始 , 当 
JavaScript 的 解释 器 遇 到 反 斜 杠 时 ,会 将 其 识别 为 该 转 义 字符 所 代表 的 操作 意图 。 


表 11-1 常用 的 转 义 字符 


字符 意义 
\b 制 表 
\f 单 引号 
Wm 双 引号 
Y 反 斜 杠 
11.3.2 ”变量 


变量 的 主要 作用 是 存放 程序 运行 过 程 中 的 临时 信息 。 对 于 变量 必须 了 解 变量 的 命 
名 变量 的 类 型 .变量 的 声明 以 及 变量 的 作用 域 。 

1. 变量 的 命名 

变量 名 是 由 字母 数字、 下 划 线 和 美元 符号 ($ ) 组 成 的 一 个 字符 串 。 但 不 能 以 数字 
开头 ,不 能 是 JavaScript 中 的 关键 字 。 

需要 提醒 的 是 : 声明 的 变量 名 是 区 分 大 小 写 的 。 

2. 变量 的 类 型 

JavaScript 中 采用 弱 类 型 的 变量 形式 ,因而 声明 一 个 变量 时 不 必 指 定 变量 的 类 型 ,而 
是 在 赋值 时 根据 数据 的 类 型 来 确定 变量 的 类 型 。JavaScript 中 的 变量 也 可 以 不 需要 提前 
做 声明 而 直接 使 用 ,但 是 建议 养 成 在 使 用 变量 之 前 先 声明 的 好 习惯 。 

3. 变量 的 声明 

若 要 对 变量 做 声明 ,可 以 用 var 关键 字 ,如 : 
声明 了 一 个 名 字 是 name_x 的 变量 。 

4. 变量 的 作用 域 

根据 变量 的 作用 域 , JavaScript 中 的 变量 可 分 为 全 局 变量 和 局 部 变量 两 种 。 全 局 变 
量 是 在 所 有 上 郴 数 之 外 的 脚本 代码 中 定义 的 变量 ,其 作用 范围 是 这 个 变量 定义 之 后 的 所 
有 语句 ,包括 其 后 定义 的 函数 中 的 代码 和 它 后 面 的 其 他 过 script 盖 二 /script 二 标记 中 的 


代码 。 局 部 变量 定义 在 某 个 函数 中 ,作用 域 为 本 函数 中 且 位 于 这 个 变量 定义 之 后 的 
代码 。 
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11.3.3 ”运算 符 


. 算术 运算 符 


JavaScript 中 的 算术 运算 符 如 表 11-2 所 示 。 
表 11-2 算术 运算 符 及 其 含义 


含义 运算 和 含义 
将 两 数 相 加 余 运 算 符 , 将 两 数 相 除 后 取 余数 
将 两 数 相 减 过 增 运算 符 , 将 数值 加 1 
将 两 数 相 乘 化 碱 运算 符 , 将 数值 减 1 
将 两 数 相 除 负 号 运算 符 , 取 该 数 的 负数 


2. 字符 串 运 算 符 
将 两 个 字符 串 结合 起 来 的 运算 符 ,JavaScript 中 的 字符 串 运算 符 如 表 11-3 所 示 。 
表 11-3 字符 串 运 算 符 及 其 含义 


运算 符 含义 

x 十 y 将 字符 串 x 与 字符 串 y 合并 , 即 首 尾 相连 

x 让 = 将 字符 串 x 与 字符 串 y 合并 后 的 字符 串 赋 给 x 
3. 比较 运算 符 


比较 运算 符 的 运算 过 程 是 首先 对 其 操作 数 进行 比较 ,再 返回 一 个 true 或 false 的 值 。 
JavaScript 中 的 字符 串 运 算 符 如 表 11-4 所 示 。 
表 11-4 比较 运算 符 及 其 含义 


运算 符 含 义 

= 如 果 两 操作 数 相等 ,返回 true 

‘ss 如 果 两 操作 数 不 等 ,返回 true 

一 一 如 果 两 操作 数 相等 且 数 据 类 型 相同 ,返回 true 

!== 如 果 两 操作 数 不 等 且 数 据 类 型 不 同 ,返回 true 

< 如 果 左 边 的 操作 数 小 于 右边 的 操作 数 , 返 回 true 

送 宇 如 果 左 边 的 操作 数 小 于 或 等 于 右边 的 操作 数 , 返 回 true 
> 如 果 左 边 的 操作 数 大 于 右边 的 操作 数 , 返 回 true 

>= 如 果 左 边 的 操作 数 大 于 或 等 于 右边 的 操作 数 , 返 回 true 


注意 : 在 进行 比较 运算 时 ,会 遇 到 不 同 数据 类 型 的 数据 参与 运算 ,此 时 数据 类 型 的 转 
换 是 由 JavaScript 自动 进行 的 。 


4. 布尔 运算 符 
布尔 运算 也 称 为 逻辑 运算 ,运算 的 结果 仍然 是 逻辑 值 。JavaScript 中 的 布尔 运算 符 
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如 表 11-5 所 示 。 
表 11-5 布尔 运算 符 及 其 含义 


ag&&b 车 a,b 都 是 true, 则 结果 为 true 
allb 车 a,b 中 任意 一 个 是 true, 则 结果 为 true 


la 车 a 是 true, 则 结果 为 false 


11.3.4 ”表达 式 

在 定义 完 变 量 后 ,就 可 以 对 它们 进行 赋值 或 运算 了 ,这 些 过 程 通常 是 通过 表达 式 来 
完成 的 ,也 就 是 说 表达 式 是 变量 、 常 量 、 布 尔 值 及 运算 符 的 有 机 集合 。 

JavaScript 中 的 表达 式 有 算术 表达 式 、 字 符 表达 式 .比较 表达 式 和 布尔 表达 式 等 。 
11.3.5 程序 控制 流 语句 

在 任何 程序 设计 语言 中 ,程序 控制 流 语句 都 是 必需 的 , 它 可 以 使 程序 按照 一 定 的 方 
式 或 顺序 执行 ,实现 程序 的 运行 控制 ,减少 程序 的 混乱 。 

1. 条 件 语 名 

if-else 语句 是 JavaScript 中 最 基本 的 条 件 控制 语句 ,通过 对 表达 式 的 判断 ,来 改变 语 


句 的 执行 顺序 。 
if-else 语句 共有 如 下 三 种 格式 : 


if (表达 式 ) if (表达 式 ) if (表达 式 1) 

{ { 语句 1; 

语句 块 1; 语句 块 1; else if (表达 式 2) 

} 语句 2; 
else if (表达 式 3) 
语句 3; 
else 
语句 n; 

(a) (©) 
2. for 语句 


for 语句 主要 用 来 实现 条 件 循环 操作 , 当 条 件 成 立时 ,执行 循环 体 , 否 则 结束 循环 执 
行 for 语句 后 的 语句 。 基 本 格式 如 下 : 
for (初始 化 ;条 件 ; 增 量 ) { 
循环 体 语句; 
} 
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初始 化 主要 是 给 计数 器 变量 置 初 值 ;条 件 是 用 来 判断 是 否 符合 条 件 去 执行 循环 体 语 
句 ; 增 量 主要 用 来 标识 计数 器 变量 在 每 次 循环 时 的 变化 方式 。 三 者 之 间 必 须 用 分 号 
分 开 。 


3. switch 语句 


分 支 语句 switch 可 以 根据 一 个 变量 的 不 同 取 值 而 采取 不 同 的 处 理 方法 , 即 实现 了 多 
分 支 控制 。 基 本 格式 如 下 : 


switch (表达 式 ) 
{ 
case labell: 语句 串 1; 
case labe12: 语句 串 2; 
case labe13: 语句 串 3; 


default: 语句 串 n; 
} 


如 果 表 达 式 的 值 同 程序 中 所 提供 的 任何 一 条 语句 都 不 匹配 ,将 执行 default 中 的 语句 。 
4. while 循环 语句 


while 循环 语句 有 两 种 格式 ,一 种 是 while 循环 , 另 一 种 是 do while 循环 。 两 者 的 区 
别 在 于 while 循环 是 先 判断 条 件 ,再 执行 循环 体 语 句 ,而 do while 循环 是 先 执行 循环 体 语 
句 ,再 判断 条 件 。 当 第 一 次 判断 条 件 均 为 真 时 ,两 者 的 执行 没有 什么 不 同 ,但 如 果 第 一 次 
判断 条 件 就 为 假 时 ,while 循环 的 循环 体 语句 一 次 也 不 执行 ,而 do while 循环 则 不 同 , 循 
环 体 语句 至 少 执行 一 次 。 


while (条 件 ) dof{ 

{ 循环 体 语句 ; 

循环 体 语句 ; } 

} while (条 件 ); 
(a) (b) 


for 语句 和 while 语句 均 可 实现 循环 ,for 语句 书写 简单 ,容易 理解 ,一 般 有 明确 的 循 
环 次 数 ,而 while 语句 则 对 较为 复杂 、 循 环 次 数 未 知 的 循环 执行 效率 更 高 。 


5. break 和 continue 语句 


break 语句 的 主要 功能 是 在 循环 执行 的 过 程 中 从 for 或 while 语句 中 直接 跳出 ,执行 
for 或 while 后 的 语句 。 
continue 语句 则 可 使 程序 的 执行 跳出 本 次 循环 ,直接 进入 下 一 次 循环 的 判断 。 


6. 注释 语句 
// 这 是 单行 注释 。 
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/* 这 是 多 行 注释 .…. x /。 
11.3.6 ”函数 


JavaScript 支持 两 种 函数 ,一 种 是 JavaScript 的 库 函 数 , 另 一 种 是 用 户 自 定义 函数 。 
1. 库 函 数 

JavaScript 语言 中 包括 若干 个 库 函 数 , 即 本 身 自 带 的 函数 ,如 escape() .eval() 等 。 
2. 用 户 自 定义 函数 


在 进行 较为 复杂 的 程序 设计 时 ,通常 将 要 完成 的 功能 任务 分 解 成 一 些 相 对 独立 的 小 
部 分 ,每 个 部 分 由 一 个 函数 来 独立 完成 ,这 样 一 来 ,使 得 复杂 的 设计 不 青 “ 复 杂 ”, 结 构 更 
清晰 ,维护 更 容易 。 
用 户 自 定义 函数 的 方法 如 下 : 
function 函数 名 (参数 , 变 元 ) 
{ 
函数 体 ; 
return 表达 式 ， 
} 


11.4 JavaScript 的 对 象 和 事件 


11.4.1 JavaScript 的 对 象 


JavaScript 是 一 门 基 于 对 象 的 语言 ,之 所 以 这 样 说 是 因为 它 没有 提供 像 抽 象 、 继 承 、 
重 载 等 有 关 面 向 对 象 语言 的 许多 功能 ,而 是 将 其 他 语言 所 创建 的 复杂 对 象 统一 起 来 , 形 
成 了 一 个 非常 强大 的 对 象 系统 ,在 需要 时 直接 引用 就 可 以 了 。 


1. JavaScript 的 对 象 种 类 


(1) 引用 JavaScript 内 部 对 象 。 
(2) 由 浏览 器 提供 对 象 。 
(3) 用 户 创建 新 对 象 。 


2. 常用 内 部 对 象 


1) 串 对 象 

主要 用 于 字符 串 在 Web 页 面 中 的 显示 .字体 大 小 .字体 颜色 以 及 字符 的 大 小 写 
转换 。 

2) 算术 函数 的 math 对 象 

提供 除了 加 、 减 、 乘 \ 除 以 外 的 一 些 运算 。 如 对 数 、 平 方 根 等 。 
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3) 日 期 和 时 间 对 象 
提供 一 个 有 关 日 期 和 时 间 操 作 的 对 象 。 


3. 对 象 属性 的 引用 
1) 使 用 点 (. ) 运 算 符 


student .name=“ 李 海 明 ” 
student.city=“ 兰 州 市 ” 
student.year="1990" 


2) 通过 对 象 的 下 标 实现 引用 


student [0]=“ 李 海 明 ” 
student [1]=“ 兰 州 市 ” 
student [2]="1990" 


通过 数组 的 形式 访问 属性 ,可 以 使 用 循环 操作 方便 获取 其 值 。 
3) 通过 字符 串 的 形式 实现 


“ 李 海 明 ” 
兰州 市 
student ["year"]="1990" 


student ["name"]= 


student ["city"] 


4. 浏览 器 内 部 对 象 


使 用 浏览 器 内 部 对 象 系统 的 作用 是 将 相关 元 素 组 织 包装 后 供 程序 设计 人 员 使 用 , 减 
轻 设计 负担 ,提高 设计 能 力 。 

(1) 窗口 对 象 (window) : window 对 象 处 于 对 象 层次 的 最 基层 , 它 提供 了 处 理 窗 口 
的 方法 和 属性 ,每 个 window 代表 一 个 浏览 器 窗口 。 

(2) 位 置 对 象 (location) : location 对 象 提 供 了 与 当前 打开 的 URL 一 起 工作 的 方法 
和 属性 ,经 常用 于 实现 页 面 跳 转 。 

(3) 历史 对 象 (history): history 对 象 提供 了 与 浏览 器 的 浏览 历史 有 关 的 操作 ,以 使 
得 用 户 在 历史 站 点 页 面 间 漫游 。 

(4) 文档 对 象 (document): document 对 象 可 以 更 新 正在 装 入 或 已 经 装 入 的 文档 ,并 
可 以 访问 装 入 文档 所 包含 的 HTML 元 素 , 同 时 还 提供 许多 帮助 访问 这 些 元 素 的 属性 。 


11.4.2 JavaScript 的 事件 


用 户 对 浏览 器 页 面 所 做 的 动作 叫做 “事件 ”, 这 些 动作 通常 是 通过 鼠标 或 键盘 来 完成 
的 ,由 这 些 动 作 引 发 的 一 连 串 程序 动作 , 称 为 事件 驱动 。 


1. JavaScript 支持 的 事件 种 类 
JavaScript 支持 的 常用 对 象 事件 种 类 及 其 适用 范围 如 表 11-6 所 示 。 
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表 11-6 JavaScript 支持 的 常用 对 象 事件 种 类 及 其 适用 范围 


事件 名 适用 对 象 含 沈 
onBlur window 及 所 有 表单 子 组 件 失去 焦点 
onClick link 及 所 有 表单 子 组 件 用 户 在 对 象 上 单 击 鼠标 左 键 
onDblclick link 及 所 有 表单 子 组 件 用 户 在 对 象 上 连续 双击 鼠标 左 键 
onFocus window 及 所 有 表单 子 组 件 取得 输入 焦点 
onKeyDown image、\link 及 所 有 表单 子 组 件 用 户 按 下 键盘 上 的 某 个 按键 的 一 刹那 
onKeyPress image、\link 及 所 有 表单 子 组 件 用 户 按 下 键盘 上 的 某 个 按键 时 
onKeyup image、\link 及 所 有 表单 子 组 件 按键 弹 起 来 的 一 刹那 
onLoad document 浏览 器 加 载 页 面 时 
onunLoad document 用 户 离开 页 面 时 
onMousedown document ,link 及 所 有 表单 子 组 件 用 户 单 击 鼠标 时 
onMouseOut document \link 及 所 有 表单 子 组 件 鼠标 光标 离开 相应 对 象 时 
onMouseOver document \link 及 所 有 表单 子 组 件 鼠标 光标 移 到 相应 对 象 上 时 
onResize window 用 户 调整 窗口 大 小 尺寸 时 
onSelect text .password \texterea 用 户 选 取 相 应 对 象 时 
onSubmit form 用 户 单 击 表单 中 的 submit 按钮 时 
2. 事件 处 理 


事件 处 理 是 对 象 化 编程 的 一 个 很 重要 的 环节 ,没有 了 事件 处 理 , 程 序 就 会 变 得 很 死 ， 
缺乏 灵活 性 。 
事件 处 理 的 过 程 可 以 这 样 表 示 : 发 生 事件 一 启动 事件 处 理 程序 一 事件 处 理 程序 做 出 
反应 。 其 中 ,要 使 事件 处 理 程序 能 够 启动 ,必须 先 告诉 对 象 ,如 果 发 生 了 什么 事情 ,要 启 
动 什么 处 理 程序 ,否则 这 个 流程 就 不 能 进行 下 去 ,使 用 事件 处 理 程序 有 两 种 方法 。 

(1) 直接 在 HTML 标记 中 指定 ,这 种 方法 使 用 得 最 为 普遍 。 

方法 是 : 

< 标记 ... 事 件 =" 事 件 处 理 程序 " [事件 = "事件 处 理 程序 "...]> 

如 过 body ... onload 二 "alert(' 网 页 读 取 完成 ,请 慢 慢 欣赏 1')”onunload 二 "alert(' 再 
见 1) "二, 这样 定义 的 二 body 二 标记 ,能 使 文档 读 取 完 毕 时 弹出 一 个 对 话 框 ,内 容 为 “网 页 
读 取 完 成 ,请 慢 慢 欣赏 ”而 在 用 户 退 出 文档 (或 者 关闭 窗口 或 者 到 另 一 个 页 面 去 ) 时 又 
弹出 一 个 对 话 框 , 内 容 为 “再见 ”。 

(2) 在 JavaScript 中 说 明 。 

方法 是 : 

< 对 象 > .< 事件 >=< 事 件 处 理 程序 >; 

例如 : 


<script language="javascript"> 
document .onload=alert (' 网 页 读 取 完成 ,请 慢 慢 欣 赏 !'); 


</script> 
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用 这 种 方法 需要 注意 的 是 事件 处 理 程序 是 真正 的 代码 ,而 不 是 字符 串 形式 的 代码 。 
如 果 要 做 的 事情 不 止 一 件 ,最 好 还 是 定义 一 个 函数 ,然后 用 以 下 的 语法 调用 比较 好 。 


function multiaction() { 
} 
window.onselect=multiaction (); 


这 个 例子 将 multiaction() 函 数 作 为 window 对 象 的 onselect 事件 的 处 理 程序 来 
使 用 。 


11.5 ”JavaScript 应用 实例 


应 用 JavaScript 开发 一 些 特效 ,可 以 活跃 网 页 设计 ,增强 网 页 功能 。 目 前 ,在 
Internet 上 有 大 量 的 JavaScript 特效 代码 ,在 不 侵犯 版 权 的 情况 下 ,可 以 直接 复制 加 工 再 
应 用 。 下 面 列 举 几 个 JavaScript 特效 的 例子 。 


11.5.1 动态 显示 日 期 和 时 间 


【实例 11-1】 在 网 页 中 的 指定 位 置 动态 显示 日 期 和 时 间 。 
浏览 器 显示 效果 如 图 11-1 所 示 。 
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11-1 在 网 页 中 动态 显示 日 期 和 时 间 


程序 代码 如 下 : 


< IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 
Org/TR/xhtml1/DTD/xhtmll- transitional .dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title> 动 态 显 示 日 期 和 时 间 < /title> 


</head> 
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<body> 

今天 是 : 

<script language="javascript"> 

var enabled=0; today=new Date(); 

Var day; var date; 

if(today.getDay ()==0) day= "星期 日 " 

if (today.getDay ()==1) day= "星期 一 " 

if (today.getDay ()==2) day= "星期 二 " 
if(today.getDay ()==3) day= "星期三" 
if(today.getDay ()==4) day= "星期四" 
if(today.getDay ()==5) day= "星期 五 " 
if(today.getDay()==6) day=" 星 期 六 " 
datel=today.getFullYear ()+" 年 "+ (today.getMonth()+1)+" 月 "+today.getDate ()+" 日 "7 
date2=day; 

document .write (datel); 

document .write (date2); 

document .write("<span id='clock'></span>"); 
Var now,hours,minutes, seconds, timeValue; 
function showtime (){ 

now=new Date () 7 

hours=now.getHours () 
minutes=now.getMinutes () 
seconds=now.getSeconds () 

timeValue= (hours >=12) 3"":""; 

timeValue +=hourst+":"; 

timeValue += ((minutes <10) ?3"0" : "") +minutes +":"; 


timeValue += ((seconds <10) ?3"0" : "") +seconds +" 


clock.innerHTML=timeValue; 
setTimeout ("showtime ()",100); 
} 

showtime (); 

</script> 

</body> 

</html> 


11.5.2 ”状态 栏 跑马 灯 信 息 


【实例 11-2】 在 浏览 器 的 状态 栏 中 从 左 向 右 滚动 显示 文本 信息 。 
浏览 器 显示 效果 如 图 11-2 所 示 。 

程序 代码 如 下 : 

< IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. 


org/TR/xhtml1/DTD/xhtmll- transitional .dtd"> 
<html xmlns="http://www.w3.0rg/1999/xhtml"> 
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11-2 状态 栏 跑马 灯 信息 


<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title> 状 态 栏 跑马 灯 信息 < /title> 

<script language="javascript"> 

function scroll (seed) 

{ 

var ml=" 欢 迎 光临 " 

var m2= 以 网 站 开发 与 网 页 设计 》" 


var msg=ml+" "+m2; 


Var out=" "; 
Var c=1; 

if (seed >100) { 
seed--; 


Var cmd="scroll (" +seed +")"; 
timerTwo=window.setTimeout (cmd,100); 
} 

else if (seed <=100 && seed >0) { 


for (c=0 ; c <seed; c++) { 


out+=msg; 

seed--; 

Var cmd="scroll (" +seed +")"; 
window.status=out; 
timerTwo=window.setTimeout (cmd,100); 
} else if (seed <=0) { 

if (-seed <msg.length) { 
out+=msg.substring(- seed,msg.length); 
seed--—; 

Var cmd="scroll (" +seed +")"; 
window.status=out; 


timerTwo=window.setTimeout (cmd,100); 
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} 
else { 


window.status= 了 
timerTwo=window.setTimeout ("scroll (100)",7); 
} 

} 

} 

timerONE=window.setTimeout ('scroll (100)"',50); 
</script> 

</head> 

<body> 

</body> 

</html> 


11.5.3 ”计时 器 


【实例 11-3】 带 有 开始 和 停止 按钮 的 计时 器 。 
浏览 器 显示 效果 如 图 11-3 所 示 。 
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请 点 击 上 面 的 “开始 计时 ”按钮 来 启动 计时 器 。 输 入 框 会 一 直 进行 计 
时 ， 从 0 开始 。 点 击 “ 停 止 计时 ”按钮 可 以 终止 计时 。 
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图 11-3 带 有 开始 和 停止 按钮 的 计时 器 


程序 代码 如 下 : 


<html> 

<head> 

<title> 计 时 器 < /title> 

<script language="javascript"> 

var c=0 

Var 七 

function timedCount () 

{ 

document .getElementById('txt') .value=c 
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t=setTimeout ("timedCount ()",1000) 

} 

function stopCount () 

{ 

clearTimeout (t) 

} 

</script> 

</head> 

<body> 

<form> 

<input type= "button" value=" 开 始 计 时 " onClick="timedCount () "> 
<input type= "text" id="txt"> 

<input type= "button" value=" 停 止 计时 " onClick="stopCount () "> 
</form> 

<p> 请 单 击 上 面 的 “开始 计时 ”按钮 来 启动 计时 器 。 输 入 框 会 一 直 进行 计时 ,从 0 开始 。 单 击 “ 停 
止 计 时 ”按钮 可 以 终止 计时 。< /p> 

</body> 

</html> 


11.5.4 获取 浏览 器 版 本 号 


【实例 11-4】 获取 客户 端正 浏览 器 的 版 本 号 ,如 果 版 本 号 低 于 4.0, 则 提示 "您 的 浏 
览 器 该 升级 了 !”, 如 果 版 本 号 高 于 4.0 则 提示 “您 的 浏览 器 是 新 版 本 !”。 
浏览 器 显示 效果 如 图 11-4 所 示 。 


条 未 取 浏 览 器 版本 号 - Windows Interet Explorer [LEI 
© [a cvwasnn -|4[x]| 筷 sn Pp 


究 愉 | 四 |- | 二 更 t- 天 习 xX[ | 全" 国 - 口 屿 -mm ” 


| 完 E 也 计算 机 | 保护 模式 禁用 给 7” 导 100% > | 
\ i | 


11-4 获取 浏览 器 版 本 号 


程序 代码 如 下 : 


<html> 
<head> 
<title> 获 取 浏 览 器 版 本 号 < /title> 


<script type= "text/javascript"> 
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function detectBrowser () 
{ 
Var browser=navigator.appName 
Var b version=navigator.appVersion 
Var version=parseFloat (b version) 
if ((browser=="Netscape" ||browser== "Microsoft Internet Explorer") && (version>=4)) 
{alert ("您 的 浏览 器 是 新 版 本 !") } 
else 
{alert ("您 的 浏览 器 该 升级 了 !")} 
} 
</script> 
</head> 
<body onload= "detectBrowser()"> 
</body> 
</html> 


11.5.5 滚动 显示 公告 信息 


【实例 11-5】 从 下 往 上 循环 滚动 显示 公告 栏 中 的 公告 信息 。 
浏览 器 显示 效果 如 图 11-5 所 示 。 


滚动 公告 信息 5 


深 动 公告 信息 6 
深 动 公告 信息 7 
浓 动 公告 信息 8 
滨 动 公告 信息 


滚动 公告 信息 4 


图 11-5 ”滚动 显示 公告 信息 


程序 代码 如 下 : 


<html> 

<head> 

<title> 滚 动 显 示 公 告 栏 </title> 

<script language= "javascript"> 

function selectScroller(n) { 

optlist=document .scrollform.scroller; 

optlist[optlist.length]=new Option(optlist[0] .text, "", false, false); 
optlist[0]=null; 
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optlist.selectedIindex=-1; 

n= (n +1)%optlist.length; 

setTimeout ("selectScroller ("+n+")",2000); 

} 

</script> 

</head> 

<body OnLoad="selectScroller (0);"> 

滚动 公告 栏 

<form name="scrollform"> 

<select name="scroller" size=8> 
<option> 深 动 公告 信息 1 
<option> 深 动 公告 信息 2 
<option> 滚 动 公告 信 息 3 
<option> 滚 动 公 告 信息 4 
<option> 滚 动 公 告 信息 5 
<option> 滚 动 公 告 信息 6 
<option> 滚 动 公告 信息 7 
<option> 滚 动 公 告 信息 8 
</select> 

</form> 

</body> 

</html> 


11.6 本 章 小 结 


网 页 特效 在 网 站 开发 与 网 页 设计 过 程 中 起 到 了 画龙点睛 的 作用 ,可 以 活跃 网 页 设 
计 , 增 强 网 页 功能 。 

本 章 以 JavaScript 网 页 特效 制作 为 例 , 首 先 介绍 了 JavaScript 的 特点 、 功 能 、 基 本 语 
法 、 对 象 和 事件 等 必 备 的 基础 知识 ,然后 介绍 了 三 种 在 网 页 中 使 用 JavaScript 的 方法 ,最 
后 列举 了 几 个 实例 。 

目前 ,在 Internet 上 有 大 量 的 JavaScript 特效 代码 ,在 不 侵犯 版 权 的 情况 下 ,可 以 直 
接 复制 加 工 再 应 用 。 


11.7 ”局 题 


一 、 填 空 题 


1. JavaScript 是 一 种 被 罕 人 HTML 网 页 之 中 的 基于 和 的 脚本 语 
言 , 它 弥 补 了 HTML 语言 交互 功能 差 ,控制 呆板 单调 的 缺陷 。 

2. 脚本 是 一 段 用 来 完成 某 些 特殊 功能 的 程序 ,脚本 程序 分 为 服务 器 端 脚本 和 客户 端 
脚本 两 类 ,常见 的 服务 器 脚本 有 、 :常见 的 客户 端 脚本 有 
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3. JavaScript 声明 的 变量 名 是 (区 分 /不 区 分 ) 大 小 写 的 。 

4. JavaScript 中 的 变量 分 为 变量 和 变量 两 种 。 

5. 概括 起 来 ,插入 JavaScript 的 方法 有 主要 有 & 和 三 种 
形式 。 

二 、 简 答 及 实 训 题 


1. 目前 支持 JavaScript 的 浏览 器 主要 有 哪些 ? 
2. 为 了 便于 JavaScript 代码 的 重复 利用 ,通常 采用 什么 方法 来 加 载 ? 它 的 优点 是 


3. javaScript 支持 哪些 事件 处 理 程序 ”如何 应 用 这 些 事件 处 理 程序 ? 

4. 编写 一 段 JavaScript 代码 ,实现 控制 alert 中 的 换行 。 

5. 编写 一 个 用 户 注 册 的 简单 HTML 页 面 ,如 图 11-6 所 示 。 名 称 为 userreg. html， 
该 页 面包 含 了 用 户 的 基本 信息 (用 户 名 、 密 码 、 性 别 、 身 份 、 自 我 介绍 ), 要 求 使 用 
JavaScript 脚本 语言 对 该 页 面 中 用 户 输入 的 信息 进行 客户 端 校 验 , 如 用 户 名 、 密 码 、 性 别 、 
省 份 、 自 我 介绍 不 能 为 空 ,登录 密码 长 度 为 6 一 16 位 , 仅 可 用 英文 数字、 特殊 字符 ,用 户 
名 由 a 一 z 的 英文 字母 (不 区 分 大 小 写 ) .0 一 9 的 数字 点 或 下 划 线 组 成 ,长 度 为 3 一 
18 个 字符 ,只 能 以 数字 或 字母 开头 等 。 
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图 11-6 用 户 注册 页 面 
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随 着 Internet 的 发 展 ,基于 HTTP 协议 和 HTML 标准 的 Web 应 用 呈 几 何 数量 级 增 
长 ,人 们 的 生活 在 不 知 不 觉 中 已 经 被 网 络 悄悄 地 改变 。 不 但 可 以 通过 网 络 的 即时 通信 工 
具 来 交流 ,也 可 进行 网 络 购物 和 电子 商务 等 活动 。 与 此 相对 应 , Web 技术 也 由 最 初 静态 
Web 技术 发 展 为 动态 Web 技术 ,再 到 今天 已 经 被 广泛 应 用 的 Web 2. 0 技术 。 

2010 年 HTML5 在 Internet 上 被 炒 得 很 热 , 被 誉 为 是 近 十 年 来 Web 标准 最 巨大 的 
飞跃 。 和 以 前 的 版 本 不 同 ,HTML5 并 非 仅仅 用 来 表示 Web 内 容 , 它 的 使 命 是 将 Web 带 
入 一 个 成 熟 的 应 用 平台 ,在 这 个 平台 上 ,视频 、 音 频 、 图 像 、 动 画 以 及 与 计算 机 的 交互 都 被 
标准 化 。 尽 管 HTML5 的 实现 还 有 很 长 的 路 要 走 , 但 是 HTML5 正在 改变 着 Web。 


12.1 XML 技术 


12.1.1 XML 技术 简介 


XML 是 eXtensible Markup Language 的 缩写 , 意 为 “可 扩展 的 标记 语言 ”, 它 与 
HTML 一 样 ,都 是 SGML (Standard Generalized Markup Language, 标 准 通 用 标记 语 
言 )。XML 是 Internet 环境 中 跨 平 台 的 、 依 赖 于 内 容 的 技术 ,是 当前 处 理 结构 化 文档 信 
息 的 有 力 工 具 。 同 时 , 它 也 是 一 种 简单 的 数据 存储 语言 ,使 用 一 系列 简单 的 标记 描述 数 
据 ,而 这 些 标记 可 以 用 方便 的 方式 建立 ,虽然 XML 占用 的 空间 比 二 进 制 数据 占用 的 空间 
要 多 ,但 是 XML 极其 简单 且 易于 掌握 和 使 用 。 


1. XML 技术 的 起 源 


XML 是 从 1996 年 开始 有 其 雏形 ,并 向 W3C( 万 维 网 协会 ) 提 案 , 在 1998 年 2 月 发 布 
为 W3C 的 标准 ( 即 XML 1.0)。XML 的 前 身 是 SGML ,是 自 IBM 从 60 年 代 就 开始 发 展 
的 GML 标准 化 后 的 名 称 。 

1996 年 ,万维网 协会 开始 设计 一 种 可 扩展 的 标记 语言 ,使 其 能 够 将 SGML 的 灵活 性 
和 强大 功能 与 已 经 被 广泛 采用 的 HTML 结合 起 来 。 这 种 后 来 变 成 XML 的 语言 继承 了 
SGML 的 规范 ,而且 实际 上 就 是 后 者 的 一 个 子 集 。 从 SGML 入 手 使 得 该 设计 小 组 能 够 
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将 精力 集中 在 简化 已 有 的 成 果 上 ,SGML 已 经 提供 了 一 种 可 以 无 限 扩 展 的 语言 , 它 允 许 
任何 人 能 够 根据 自己 的 需要 加 以 扩充 。 由 于 有 太 多 的 可 选 功能 .SGML 变 得 过 于 复杂 ， 
以 至 于 很 难 编写 出 针对 这 种 语言 的 普通 解释 器 ,而 XML 的 解释 器 则 简单 得 多 。XML 之 
所 以 要 较 SGML 更 为 简化 ,很 大 程度 上 是 出 于 易 用 性 的 考虑 。 人 们 对 标记 的 读 写 过 程 应 
该 使 用 现 有 的 、 简 便 通用 的 工具 ,同时 ,也 应 当 简化 计算 机 对 文档 和 数据 交换 的 处 理 。 此 
外 ,XML 使 得 现 有 的 Internet 协议 和 软件 更 为 协调 ,从 而 简化 了 数据 处 理 和 传输 。 

作为 一 个 不 错 的 SGML 子 集 ,XML 还 保持 了 对 现 有 面向 SGML 的 系统 的 向 下 兼容 
性 ,这 样 ,用 XML 标记 过 的 数据 就 仍然 可 以 在 这 些 系统 中 使 用 ,为 基于 SGML 的 行业 节 
省 了 大 笔 的 改造 费用 。 同 时 ,与 Web 的 结合 也 使 得 它 更 便于 被 访问 。1998 年 2 月 ,XML 
1.0 成 为 W3C 的 推荐 标准 。 

XML 是 一 种 界定 文本 数据 的 简便 而 标准 的 方法 , 它 曾 经 被 称 作 ”Web 上 的 ASCII 
码 ”。 就 好 像 你 可 以 使 用 自己 喜爱 的 编程 语言 来 创建 任何 一 种 数据 结构 ,然后 同 其 他 人 
在 其 他 计算 平台 上 使 用 的 其 他 语言 来 共享 一 样 。XML 的 标记 用 来 说 明 你 所 描述 的 概 
念 ,而 属性 则 用 来 控制 它们 的 结构 。 所 以 ,用 户 可 以 定义 自己 所 设计 出 的 语法 并 同 其 他 
人 进行 共享 。 


2. XML 技术 的 特点 


XML 与 HTML 相 比 较 , 具 有 以 下 特点 : 

1) 使 用 有 意义 的 标记 

HTML: 供 浏览 器 读 取 , 不 能 传送 数据 的 语义 。 

XML: 具有 语义 。 

2) 数据 的 语义 与 显示 方式 分 开 

HTML: 决定 数据 显示 方式 的 语言 。 

XML: 描述 数据 内 容 的 语言 .本身 并 不 决定 数据 该 如 何 显示 ,数据 的 显示 由 XSL 
决定 。 
3) 可 自 定义 的 标记 
HTML: 标记 由 少数 权威 团体 制定 ,种 类 有 限 且 不 能 随意 添加 。 

XML: 可 由 用 户 按 需 要 增加 标记 。 如 数学 标记 语言 MATHML、 财 经 标记 语言 
FPML、 电 子 商务 标记 语言 EBXML 等 。 

4) 严格 的 语法 控制 

HTML: 语法 规则 比较 多 元 化 ,具有 较 大 灵活 性 。 文 件 结构 比较 松散 ,不 能 很 容易 
地 转换 为 其 他 类 型 格式 ,比较 难 用 程序 来 做 大 量 而 有 效 的 处 理 , 数 据 再 利用 的 潜力 大 为 
降低 。 

XML: 对 语法 有 严格 的 要 求 ,所 有 XML 的 文件 都 必须 经 过 严格 的 “验证 ”过 程 才 算 
完成 ,文件 格式 容易 转换 。 

总 之 ,XML 与 HTML 的 设计 区 别 是 : XML 是 用 来 存储 数据 的 , 重 在 数据 本 身 。 而 
HTML 是 用 来 定义 数据 的 , 重 在 数据 的 显示 模式 。XML 不 是 HTML 的 升级 ,也 不 是 
HTML 的 替代 产品 ,虽然 两 者 有 点 相似 ,但 它们 的 应 用 领域 和 范围 完全 不 同 。 
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3. XML 技术 的 优点 


XML 最 大 的 优势 在 于 对 各 种 数据 的 管理 ,任何 系统 都 可 以 通过 XML 的 解析 器 来 读 
取 XML 数据 ,因此 它 的 数据 可 以 通行 各 处 ,而 不 用 担心 系统 不 支持 的 问题 。 

1) 数据 的 检索 

目前 Internet 上 主要 的 数据 检索 方式 有 分 类 检索 和 全 文 检索 ,检索 效率 低 , 或 经 常 
找 不 到 需要 的 数据 。 而 XML 已 经 成 为 表示 Web 上 多 样 性 数据 的 事实 标准 ,可 以 预见 
Web 上 的 数据 将 主要 以 XML 形式 存在 。XML 规范 的 提出 ,使 得 信息 的 组 织 更 加 规范 ， 
使 更 准确 的 信息 查询 成 为 可 能 。 随 着 XML 获得 越 来 越 广泛 的 应 用 以 及 Web 技术 的 不 
断 发 展 ,如 何 检索 Web 上 海量 的 XML 数据 已 经 受到 学 术 界 越 来 越 多 的 重视 。 

2) 数据 的 显示 

XML 将 数据 保存 的 格式 与 数据 显示 的 方式 分 开 , 使 得 XML 文件 可 以 轻易 地 更 换 数 
据 显示 的 方式 。 仅 需 改 变 XSL 的 设置 ,用 户 就 可 以 将 同一 数据 制作 成 HTML、PDF、 
WML(Wireless Markup Language) .HDML(Hand-Held Device Markup Language) 等 不 
同 格 式 , 供 不 同 的 硬件 显示 。 

3) 数据 的 交换 

XML 语法 简单 ,可 以 被 所 有 的 机 器 解读 ,又 可 以 在 各 种 平台 上 使 用 ,使 得 XML 有 潜 
力 成 为 一 个 通行 四 海 皆 准 的 标记 语言 。 
12.1.2 XML 文档 的 结构 

XML 的 语法 和 HTML 类 似 , 也 是 一 种 标记 语言 , 它 通 过 使 用 标记 来 说 明文 本 的 意 
义 和 所 代表 的 信息 。 因 此 ,有 了 HTML 的 基础 学习 XML 将 非常 简单 和 容易 。XML 文 


档 的 扩展 名 通常 为 . XML, 但 这 不 等 于 所 有 采用 XML 语法 的 文件 的 扩展 名 都 必须 
是 .XML。 下 面 是 一 个 XML 文档 的 内 容 : 


<?xml version="1l.0" encoding="GB2312" ?> 


< 系 > 
< 班级 > 
< 班级 名 称 > 信 104 本 < /班级 名 称 > 
< 创建 时 间 >2010 年 9 月 < /创建 时 间 > 
< 班主 任 > 张强 </ 班 主任 > 
</ 班 级 > 
< 班级 > 
< 班级 名 称 > 数 101 本 < /班级 名 称 > 
< 创建 时 间 >2010 年 9 月 < /创建 时 间 > 
< 班主 任 > 王 慧 </ 班 主任 > 
</ 班 级 > 
</ 系 > 


第 一 行 是 XML 文档 声明 。 它 定义 XML 的 版 本 和 所 使 用 的 编码 集 。 去 系 之 和 </ 系 二 、 
二 班级 二 /班级 二 班级 名 称 二 二 /班级 名 称 二 二 创建 时 间 二 二 /创建 时 间 二 一 班 
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主任 二 过 /班主 任 二 是 用 户 自己 定义 的 标记 。 标 记 可 以 帮助 说 明文 档 信息 的 内 涵 。 例 
如 ,如 果 没 有 以 上 标记 ,人 们 (特别 是 计算 机 软件 ) 难 以 知道 文档 中 “张强 ”是 什么 信息 ,但 
当 使 用 二 班主 任 二 二/ 班主 任 过 标记 后 ,就 可 以 清楚 地 知道 “张强 ”是 一 位 班主 任 的 名 字 。 
在 HTML 中 有 规定 的 标记 来 描述 数据 的 显示 方式 ,用 户 不 能 随便 添加 新 的 标记 ,只 能 使 
用 HTML 规范 中 定义 好 的 标记 。 相 反 ,XML 没有 固定 的 标记 ,允许 用 户 随便 发 明和 创 
建 自己 的 标记 来 描述 数据 的 结构 和 内 容 , 并 且 , 标 记名 可 以 是 中 文 ,这 就 是 XML 的 可 扩 
展 性 。 
XML 文档 是 树 状 结构 ,这 棵 树 从 根部 开始 ,并 扩展 到 树 的 最 底 端 。 在 上 面 的 文档 中 
二 系 二 二/ 系 二 是 根 元 素 , 在 它 的 下 面 定义 了 一 个 子 元 素 过 班级 二 二 /班级 二 ,在 二 班 
级 之 二 /班级 盖 下 面 又 定义 了 三 个 子 元 素 志 班级 名 称 之 二 /班级 名 称 盖 去 创建 时 间 之 
去 /创建 时 间 之 和 去 班主 任 >> 志 /班主任 之 ,上 面 XML 文档 的 结构 如 下 : 
< 系 > 
< 班级 > 
< 班级 名 称 >< /班级 名 称 > 
< 创建 时 间 >< /创建 时 间 > 
< 班主 任 ></ 班 主任 > 
</ 系 > 


用 结构 图 表示 如 图 12-1 所 示 。 


根 元 素 ( 系 ) 


9 


元 素 (班级 ) 


元 素 (班级 名 称 ) | | 元 素 (创建 时 间 ) 元 素 (班主 任 ) 


图 12-1 XML 文档 的 树 状 结构 图 


可 见 ,XML 是 结构 化 的 ,其 结构 化 主要 表现 在 以 下 两 个 方面 : 

(1) 每 一 个 元 素 都 和 其 他 元 素 有 关联 ,所 有 关联 就 形成 了 树 状 结构 。 

(2) 标记 本 身 的 含义 和 它 所 描述 的 信息 相 分 离 。 

由 于 XML 文档 是 树 状 结构 的 ,所 以 它 可 以 很 好 地 描述 具有 树 状 结构 的 复杂 信 
息 。 另 外 ,由 于 XML 是 一 种 通用 和 标准 的 文档 格式 ,可 以 采用 现成 的 XML API 来 
读 取 其 中 的 信息 ,所 以 , 越 来 越 多 的 应 用 程序 都 开始 采用 XML 文档 来 存放 有 关 配 置 
的 信息 。 


12.1.3 XML 语法 基础 
XML 的 语法 规则 很 简单 .也 很 有 逻辑 性 ,并 且 , 这 些 规则 容易 学 习 , 也 容易 使 用 。 
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1. 所 有 XML 元 素 都 须 有 关闭 标记 
在 HTML 中 ,经 常会 看 到 没有 关闭 标记 的 元 素 : 


<p>This is a paragraph 


<p>This is another paragraph 
而 在 XML 中 ,省 略 关闭 标记 是 非法 的 。 所 有 元 素 都 必须 有 关闭 标记 : 


<p>This is a paragraph< /p> 
<p>This is another paragraph< /p> 


需要 注意 的 是 : XML 文档 声明 没有 关闭 标记 ,这 不 是 错误 ,文档 声明 不 属于 XML 


本 身 的 组 成 部 分 , 它 不 是 XML 元 素 , 所 以 不 需要 关闭 标记 。 


2. XML 标记 区 分 大 小 


XML 标记 对 大 小 写 敏感 。 在 XML 中 ,标记 所 Letter 与 标记 王 letter 之 是 不 同 的 。 
必须 使 用 相同 的 大 小 写 来 编写 打开 标记 和 关闭 标记 ,例如 : 过 Message 二 信息 


所 /message 二 是 错误 的 XML 描述 方法 。 


打开 标记 和 关闭 标记 通常 被 称 为 开始 标记 和 结束 标记 。 
3. XML 必须 正确 地 典 套 

在 HTML 中 ,经 常会 看 到 没有 正确 舱 套 的 元 素 : 
<b><i>This text is bold and italic< /b></i> 

在 XML 中 ,所 有 元 素 都 必须 彼此 正确 地 和 嵌 套 : 


<b><i>This text is bold and italic</i></b> 


在 上 例 中 ,正确 嵌 套 的 意思 是 : 由 于 过 > 元 素 是 在 二 b> 元 素 内 打开 的 ,那么 它 必须 


在 二 b 过 元 素 内 关闭 。 


4. XML 文档 必须 有 根 元 素 
XML 文档 必须 有 一 个 元 素 是 所 有 其 他 元 素 的 父 元 素 ,该 元 素 称 为 根 元 素 ,例如 ， 


<root> 


<child> 
<subchild>...</subchild> 
</child> 


</root> 


上 例 中 一 root 二 一 /root 二 就 是 根 元 素 。 
5. XML 的 属性 值 须 加 引号 
与 HTML 类 似 ,XML 标记 也 可 拥有 属性 。 在 XML 中 .XML 的 属性 值 须 加 引号 。 
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请 看 下 面 的 两 个 XML 文档 ,第 一 个 是 错误 的 ,第 二 个 是 正确 的 。 
文档 一 : 
<note date=08/08/2008> 
<to>George</to> 
<from>John</from> 


</note> 

文档 二 : 

<note date="08/08/2008"> 
<to>George</to> 
<from>John</from> 


</note> 
在 第 一 个 文档 中 的 错误 是 note 元 素 中 的 date 属性 没有 加 引号 。 
6. 特殊 字符 


在 XML 中 ,一 些 字符 拥有 特殊 的 意义 。 如 果 把 字符 二 放 在 XML 元 素 中 ,就 会 发 
生 错 误 ,这 是 因为 解析 器 会 把 它 当 作 新 元 素 的 开始 。 例 如 ,以 下 的 写法 会 产生 XML 
错误 : 

<message>if salary <1000 then< /message> 


为 了 避免 这 个 错误 ,就 要 引用 一 个 实体 引用 来 代替 “二 ”字符 ,如 : 


<message>if salary &lt; 1000 then< /message> 
在 XML 中 ,有 5 个 预定 义 的 实体 引用 ,对 照 关系 如 表 12-1 所 示 : 
表 12-1 XML 中 的 特殊 字符 和 预定 义 实体 


特殊 字符 预定 义 实体 
ee Rapos; 
3 Rdquot; 
& 


需要 提醒 的 是 : 在 XML 中 ,只 有 字符 二 和 & 确实 是 非法 的 。 大 于 号 是 合法 的 ,但 
是 用 实体 引 来 代替 它 是 一 个 好 习惯 。 


7. XML 中 的 注释 
在 XML 中 编写 注释 的 语法 与 HTML 的 语法 很 相似 .例如 : 


<!--This is a Comment 一 -> 


注释 掉 的 部 分 不 会 被 XML 解析 器 解析 。 
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8. 空格 的 处 理 
HTML 会 把 多 个 连续 的 空格 字符 裁减 为 一 个 ,例如 : 


HTML: Hello, my name is David. 


输出 : Hello, my name is David. 


在 XML 中 ,文档 中 的 空格 不 会 被 删除 ,而 是 被 如 实地 交 给 下 游程 序 去 处 理 。 
9. XML 命名 规则 


XML 标记 必须 遵循 以 下 命名 规则 : 

(1) 可 以 含 字母 数字 以 及 其 他 的 字符 ; 

(2) 不 能 以 数字 或 者 标点 符号 开始 ; 

(3) 不 能 以 字符 “xml”( 或 者 XML Xml 等 ) 开 始 ; 
(4) 不 能 包含 空格 ; 

(5) 不 能 使 用 保留 的 字 词 。 


12.1.4 XML 元 素 和 属性 的 定义 


与 HTML 文档 一 样 ,XML 文档 的 主体 部 分 也 是 由 元 素 组 成 的 。XML 元 素 指 的 是 


从 ( 且 包 括 ) 开 始 标记 直到 ( 且 包 括 ) 结 束 标记 的 部 分 ,例如 : 


< 班主 任 > 张强 </ 班 主任 > 
其 中 < 二 班 主任 二 二 /班主 任 二 是 XML 的 标记 ,标记 的 名 称 也 就 是 元 素 的 名 称 。 格 式 


良好 的 XML 文档 必须 且 仅 有 一 个 根 元 素 ,其 他 元 素 都 是 这 个 根 元 素 的 子孙 元 素 。 


元 素 也 可 以 拥有 属性 ,用 来 进一步 说 明 标记 。 一 个 标记 可 以 有 多 个 属性 ,每 个 属性 


都 有 名 称 和 取 值 ,例如 以 下 XML 文档 : 


< 书架 > 
< 书 > 
< 书 名 >Harry Potter</ 书 名 > 
< 作者 >J kK. Rowling< /作者 > 
< 出 版 日 期 >2005</ 出 版 日 期 > 
< 售 价 单位 ="$ ">29.99</ 售 价 > 
</ 书 > 
< 书 > 
< 书 名 >Learning XML< / 书 名 > 
< 作者 >Erik T. Ray< /作者 > 
< 出 版 日 期 >2003</ 出 版 日 期 > 
< 售 价 单位 ="$ ">39</ 售 价 > 
</ 书 > 
</ 书 架 > 
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其 中 ,一 售 价 单位 王 "$ "29. 99 二 / 售 价 二 元素 定义 了 一 个 属性 “单位 ”。 在 HTML 
文档 中 ,标记 的 属性 值 用 双 引 号 或 单 引号 引起 来 .或 不 用 引号 。 但 是 在 XML 中 ,属性 值 
一 定 要 用 双 引 号 或 单 引号 引起 来 ,否则 被 视 为 错误 。 


12.1.5 XML 的 使 用 前 景 


XML 自从 出 现 以 来 ,一 直 受 到 业界 的 广泛 关注 。 自 从 1998 年 2 月 成 为 推荐 标准 
后 ,许多 厂商 加 强 了 对 它 的 支持 力度 ,包括 Microsoft、IBM、ORACLE、SUN 等 ,他 们 都 推 
出 了 支持 XML 的 产品 或 改造 原 有 的 产品 支持 XML。W3C 也 一 直 在 致力 于 完善 XML 
的 标准 体系 。 然 而 由 于 XML 的 复杂 性 和 灵活 性 ,加 上 开发 工具 的 相对 缺乏 ,增加 了 
XML 推广 和 使 用 的 难度 。 因 此 ,XML 很 难 在 短期 内 完全 蔡 代 HTML ,成 为 互联 网 的 主 
角 。 另 外 ,由 于 XML 是 标记 语言 ,任何 个 人 、 公 司 和 组 织 都 可 以 利用 它 定义 新 的 标准 ,这 
些 标准 间 的 通信 成 为 很 大 的 问题 ,因此 人 们 在 各 个 领域 形成 一 些 标准 化 组 织 以 统一 这 些 
标准 ,但 是 这 些 努 力 并 不 一 定 能 够 形成 理想 的 结果 。 无 论 如 何 ,XML 的 出 现 为 互联 网 的 
发 展 提供 了 新 的 动力 , 终 将 成 为 互联 网 上 全 新 的 开发 平台 。 它 促使 了 新 的 类 型 的 软件 和 
硬件 的 形成 和 发 展 , 而 这 些 发 展 又 将 反 过 来 促进 XML 的 发 展 。 


12.2 Web 2.0 与 AJAX 技术 


Web 2.0 和 传统 Web 相 比 更 富有 互动 性 与 用 户 参与 性 。 作 为 Web 2.0 里 的 一 门 重 
要 技术 ,AJAX (Asynchronous JavaScript and XML ,异步 JavaScript 和 XML) 为 开发 者 
提供 了 一 种 新 的 方式 来 开发 非 专属 性 的 、 轻 量 级 的 .内 容 丰 富 的 网 络 客户 端 。 


12.2.1 Web 2.0 技术 简介 


Web 2.0 是 相对 于 Web 1. 0 的 新 一 类 互联 网 应 用 的 统称 。 由 Web 1. 0 单纯 通过 浏 
览 器 浏览 HTML 网 页 模式 向 内 容 更 丰富 、 联 系 性 更 强 .工具 性 更 强 的 Web 2. 0 互联 网 模 
式 的 发 展 已 经 成 为 互联 网 新 的 发 展 趋势 。 

Web 1.0 的 主要 特点 是 用 户 通 过 浏览 器 获取 信息 ,而 Web2. 0 则 更 注重 与 用 户 的 交 
互 作用 ,用 户 既 是 网 站 内 容 的 消费 者 (浏览 者 ) .也 是 网 站 内 容 的 制造 者 (提供 者 ) 。 

从 Web 1.0 到 Web 2.0 的 转变 ,具体 地 说 是 从 模式 上 单纯 的 “ 读 ” 向 “ 写 ”、“ 共 同 建 
设 ” 的 发 展 。 所 以 互联 网 下 一 步 是 要 让 所 有 的 人 都 “ 忙 ” 起 来 ,用 全 民力 量 共同 “ 织 ” 出 贴 
近 生 活 的 网 络 。 

到 目前 为 止 ,对 于 Web 2.0 概念 的 说 明 , 通 常 采 用 Web 2.0 典型 应 用 案例 介绍 加 上 
对 部 分 Web 2.0 相关 技术 的 解释 。 这 些 Web 2. 0 技术 主要 包括 博客 (BLOG)、RSS.、 百 
科 全 书 (Wiki) , 威 客 、 网 摘 、 社 会 网 络 (SNS) 、P2P、 即 时 信息 (IM) 、AJAX 等 。 
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12.2.2 ”Web 2.0 技术 特性 


1. 用 户 参与 网 站 内 容 制造 


与 Web 1.0 网 站 单项 信息 发 布 的 模式 不 同 , Web 2.0 网 站 的 内 容 通常 是 由 用 户 发 布 
的 ,使 得 用 户 既 是 网 站 内 容 的 浏览 者 也 是 网 站 内 容 的 制造 者 ,这 也 就 意味 着 Web 2. 0 网 
站 为 用 户 提供 了 更 多 参与 的 机 会 ,例如 博客 网 站 和 威 客 网 站 采用 的 就 是 典型 的 用 户 创 造 
内 容 的 指导 思想 。 


2. Web 2.0 更 加 注重 交互 性 


不 仅 用 户 在 发 布 内 容 的 过 程 中 实现 了 与 网 络 服务 器 之 间 的 交互 ,而 且 也 实现 了 同一 
网 站 不 同 用 户 之 间 的 交互 ,以 及 不 同 网 站 之 间 信 息 的 交互 。 


3. 符合 Web 标准 的 网 站 设计 


Web 标准 是 目前 国际 上 正在 推广 的 网 站 标准 ,通常 所 说 的 Web 标准 一 般 是 指 网 站 
建设 采用 基于 XHTML 语言 的 网 站 设计 语言 ,实际 上 , Web 标准 并 不 是 某 一 标准 ,而 是 
一 系列 标准 的 集合 。Web 标准 中 典型 的 应 用 模式 是 "CSS 十 DIV”, 据 弃 了 HTML 4. 01 
中 的 表格 定位 方式 ,其 优点 之 一 是 网 站 设计 代码 规范 ,并 且 减 少 了 大 量 代码 ,减少 网 络 带 
宽 资 源 浪费 ,加 快 了 网 站 访问 速度 。 更 重要 的 一 点 是 ,符合 Web 标准 的 网 站 对 于 用 户 和 
搜索 引擎 更 加 友好 。 


4. Web 2.0 与 Web 1.0 没有 绝对 的 界限 


Web 2.0 技术 可 以 成 为 Web 1.0 网 站 的 工具 ,一 些 在 Web 2.0 概念 之 前 诞生 的 网 站 
本 身 也 具有 Web 2.0 的 特性 ,例如 B2B 电子 商务 网 站 的 免费 信息 发 布 和 网 络 社区 类 网 站 
的 内 容 也 来 源 于 用 户 。 


5. Web 2.0 的 核心 不 是 技术 而 在 于 指导 思想 


Web 2.0 有 一 些 典 型 的 技术 ,但 技术 是 为 了 达到 某 种 目的 所 采取 的 手段 。Web 2.0 
技术 本 身 不 是 Web 2.0 网 站 的 核心 ,重要 的 在 于 典型 的 Web 2. 0 技术 体现 了 有 具有 
Web 2.0 特征 的 应 用 模式 。 因 此 ,与 其 说 Web 2. 0 是 互联 网 技术 的 创新 ,还 不 如 说 是 互 
联网 应 用 指导 思想 的 革命 。 


12.2.3 AJAX 技 术 简 介 


AJAX 全 称 为 Asynchronous JavaScript and XML, 即 “异步 JavaScript 和 XML 的 
意思 ,是 指 一 种 创建 交互 式 网 页 应 用 的 网 页 开发 技术 ,AJAX 技术 是 目前 在 浏览 器 中 通 
过 JavaScript 脚本 可 以 使 用 的 所 有 技术 的 集合 。 

具体 来 说 ,AJAX 基于 以 下 的 技术 : 

(1) XHTML: 对 应 W3C 的 XHTML 规范 ,目前 是 XHTML 1.0。 
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(2) CSS: 对 应 W3C 的 CSS 规范 ,目前 是 CSS 2. 0。 

(3) DOM: 这 里 的 DOM 主要 是 指 HTML DOM。 

(4) JavaScript: 对 应 于 ECMA 的 ECMAScript 规范 。 

(5) XML: 对 应 W3C 的 XML DOM、XSLT、XPath 等 规范 。 

(6) XMLHttpRequest: 对 应 WhatWG 的 Web Applications 1. 0 规范 的 一 部 分 。 

可 以 看 出 ,除了 XMLHttpRequest 以 外 ,所 有 的 技术 都 是 目前 已 经 广泛 使 用 ,得 到 了 
广泛 理解 的 基于 Web 标准 的 技术 。 而 XMLHttpRequest 虽然 尚未 被 W3C 采纳 ,其 实 已 
经 是 一 个 事实 上 的 标准 。 几 乎 所 有 主流 的 浏览 器 ,例如 IE、Firefox、Netscape、Opera、 
Safari 全 部 都 支持 这 个 技术 。 所 以 AJAX 就 是 目前 做 Web 开发 最 符合 标准 的 技术 。 上 
述 所 有 技术 都 已 经 可 以 在 浏览 器 中 使 用 ,因此 用 户 不 需要 安装 任何 额外 的 软件 就 可 以 运 
行 符合 标准 的 AJAX 应 用 。 这 对 于 AJAX 技术 的 普及 、 降 低 部 署 维护 的 成 本 是 非常 重 
要 的 。 

AJAX 技 术 之 中 ,最 核心 的 技术 就 是 XMLHttpRequest, 它 最 初 的 名 称 叫 做 
XMLHTTP, 是 微软 公司 为 了 满足 开发 者 的 需要 ,于 1999 年 在 IE 5.0 浏览 器 中 率先 推 
出 的 。 后 来 这 个 技术 被 上 述 的 规范 命名 为 XMLHttpRequest。 它 正 是 AJAX 技术 之 所 
以 与 众 不 同 的 地 方 。 简 而 言 之 ,XMLHttpRequest 为 运行 于 浏览 器 中 的 JavaScript 脚本 
提供 了 一 种 在 页 面 之 内 与 服务 器 通信 的 手段 。 页 面 内 的 JavaScript 可 以 在 不 刷新 页 面 的 
情况 下 从 服务 器 获取 数据 ,或 者 向 服务 器 提交 数据 。 而 在 这 个 技术 出 现 之 前 ,浏览 器 与 
服务 器 通信 的 唯一 方式 就 是 通过 HTML 表单 的 提交 ,这 一 般 都 会 带 来 一 次 全 页 面 的 
刷新 。 

综 上 所 述 ,可 以 认为 AJAX 就 是 Web 标准 和 Web 应 用 的 可 用 性 理论 的 集大成 者 。 
它 极 大 地 改善 了 Web 应 用 的 可 用 性 和 用 户 的 交互 体验 ,最 终 得 到 了 用 户 和 市 场 的 广泛 
认可 。 


12.2.4 AJAX 技术 特性 


与 传统 的 Web 应 用 不 同 ,AJAX 采用 异步 交互 过 程 。AJAX 在 用 户 与 服务 器 之 间 引 
入 了 一 个 中 间 媒 介 , 从 而 消除 了 网 络 交互 过 程 中 “处 理 一 等 待 一 处 理 一 等 待 ” 的 缺点 。 用 
户 的 浏览 器 在 执行 任务 时 即 装载 了 AJAX 引擎 ,AJAX 引擎 用 JavaScript 语言 编写 ,通常 
藏 在 一 个 隐藏 的 框架 中 。 它 负责 编译 用 户 界面 及 与 服务 器 之 间 的 交互 。AJAX 引擎 允 
许 用 户 与 应 用 软件 之 间 的 交互 过 程 异步 进行 ,独立 于 用 户 与 网 络 服务 器 间 的 交流 。 因 
此 ,可 以 用 JavaScript 调用 AJAX 引擎 来 代替 产生 一 个 HTTP 的 用 户 动作 ,内 存 中 的 数 
据 编辑 、 页 面 导航 、 数 据 校 验 这 些 不 需要 重新 载 人 整个 页 面 的 需求 可 以 交 给 AJAX 来 
执行 。 


1. 减轻 服务 器 的 负担 


AJAX 的 原则 是 “ 按 需 取 数 据 ”, 可 以 最 大 程度 地 减少 元 余 请 求 以 及 响应 对 服务 器 造 
成 的 负担 。 
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2. 无 刷新 更 新 页 面 


减少 了 用 户 心理 和 实际 的 等 待 时 间 ,特别 是 需要 读 取 大 量 数据 时 ,不 用 像 Reload 那 
样 出 现 白 屏 的 情况 。AJAX 使 用 XMLHTTP 对 象 发 送 请 求 并 得 到 服务 器 响应 ,在 不 重 
新 载 人 整个 页 面 的 情况 下 用 JavaScript 操作 DOM 最 终 更 新 页 面 。 所 以 在 读 取 数据 的 过 
程 中 ,用 户 所 面 对 的 不 是 白 屏 ,而 是 原来 的 页 面 内 容 ( 也 可 以 加 一 个 Loading 的 提示 框 让 
用 户 知道 处 于 读 取 数 据 的 过 程 ), 只 有 当 数 据 接收 完毕 之 后 才 更 新 相应 部 分 的 内 容 。 这 
种 更 新 是 瞬间 的 ,用 户 几乎 感觉 不 到 。 


3. 更 好 的 用 户 体验 


AJAX 可 以 实现 博客 .RSS、 百 科 全 书 、 威 客 、 网 摘 、 社 会 网 络 (SNS) 等 功能 ,改善 了 用 
户 体 验 。 


4. 资源 充分 利用 


可 以 把 以 前 一 些 服务 器 负担 的 工作 转嫁 到 客户 端 ,利用 客户 端 闲置 时 来 处 理 , 不 但 
减轻 了 服务 器 和 网 络 的 负担 ,而 且 节 约 了 空间 和 宽带 租用 成 本 。 


5. 可 以 调用 外 部 数据 

通过 AJAX 可 以 调用 大 量 的 已 经 存在 的 数据 ,提高 了 开发 效率 。 

6. 良好 的 兼容 性 

AJAX 是 基于 标准 化 的 并 被 广泛 支持 的 技术 ,不 需要 下 载 插件 或 者 小 程序 。 
7. 结构 清晰 

AJAX 进一步 促进 了 页 面 呈 现 和 数据 的 分 离 ,结构 清晰 。 


12.3 HTML 5 技术 


互联 网 进入 Web 2.0 时代 已 经 是 不 争 的 事实 了 ,然而 互联 网 开发 技术 还 是 停滞 在 二 
十 世纪 九 十 年 代 末 开发 的 HTML 4. 01 上 ,虽然 这 十 几 年 中 涌现 出 了 很 多 互联 网 技术 。 
其 中 有 新 技术 ,有 旧 技 术 的 新 运用 ,但 是 HTML 4.01 已 经 不 能 很 好 地 作为 这 些 新 技术 
或 互联 网 新 需求 的 基石 。 因 此 ,HTML 5 就 逐渐 进入 开发 者 的 视野 ,并且 随 着 越 来 越 多 
的 大 公司 和 组 织 都 逐渐 看 好 并 支持 HTML 5, 使 得 HTML 5 的 发 展 越 来 越 受 到 重视 。 
虽然 HTML 5 Roadmap 上 的 发 布 时 间 是 2022 年 ,但 是 这 款 技术 已 经 逐渐 进入 了 互联 网 
生活 。 目 前 ,已 经 有 很 多 游览 器 开始 部 分 地 支持 HTML 5, 估 计 在 2012 年 HTML 5 成 
为 推荐 标准 时 ,将 会 有 更 多 的 游览 器 大 部 分 甚至 全 部 地 支持 HTML 5 标准 下 的 标记 


语言 。 
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12.3.1 HTML 5 简介 


HTML 5 作为 HTML 4. 01 之 后 又 一 个 HTML 版 本 正在 被 开发 , 旨 在 消除 程序 对 
Flash .Silverlight JavaFX 等 一 类 浏览 器 插件 的 依赖 。 

HTML 5 带 来 很 多 新 功能 以 及 HTML 代码 上 的 改变 ,归结 起 来 有 两 大 特点 : 首先 ， 
增强 了 Web 网 页 的 表现 性 能 ,除了 可 描绘 二 维 图 像 外 ,还 添加 了 用 于 播放 视频 和 音频 的 
标签 。 其 次 ,新 增 了 本 地 数据 库 等 Web 应 用 的 功能 。 


12.3.2 HTML 5 的 新 特性 


HTML 5 相 比 HTML 4. 01 更 加 成 熟 ,在 以 下 几 个 方面 进行 了 改进 : 

(1) 增强 了 HTML 表单 的 功能 ,引入 了 更 多 灵活 的 段落 标签 .新 功能 标签 。 

(2) 用 户 交 互 性 增强 ,如 Details、Datagrid、Menu、Command 等 属性 的 应 用 。 

(3) 引入 了 王 canvas 二 标签 ,并 支持 直接 用 脚本 绘图 。 

(4) 采用 沙 盒 机 制 ,隔离 潜在 的 威胁 ,可 有 效 防止 访问 父 页 面 DOM、 读 写 Cookie、 本 
地 存储 数据 库 等 。 

(5) 内 建 3D 技术 支持 ,无 须 插件 即 可 将 网 页 3D 化 ,还 规定 了 一 套 适 合 网 页 使 用 的 
3D 图 形 接口 界面 ,支持 脚本 化 运行 。 

(6) 引入 了 更 多 创建 Web 应 用 的 API, 如 文件 拖 放 、 视 频 播 放 、 音 频 播 放 .离线 Web 
应 用 等 。 


12.3.3 HTML 5 应 用 实例 


HTML 5 规范 中 引进 了 很 多 新 特性 ,其 中 最 令 人 期 待 的 之 一 就 是 canvas 元 素 。 
canvas 提供 了 通过 JavaScript 绘制 图 形 的 方法 ,此 方法 使 用 简单 但 功能 强大 。 每 一 个 
canvas 元 素 都 有 一 个 “上 下 文 (context)”, 在 其 中 可 以 绘制 任意 图 形 。 浏览 器 支持 多 个 
canvas 上 下 文 , 并 通过 不 同 的 API 提供 图 形 绘 制 功 能 。 

目前 ,大 部 分 的 浏览 器 都 支持 2D canvas 上 下 文 ,包括 Opera、Firefox、Konqueror 和 
Safari, 而 且 某 些 版 本 的 Opera 还 支持 3D canvas, Firefox 也 可 以 通过 插件 的 形式 支持 
3D canvas。 

下 面 仅 介绍 2D canvas 基础 以 及 如 何 使 用 基本 的 canvas 函数 ,如 线条 形状 .图 像 和 
文字 等 (注意 : 以 下 所 有 代码 均 在 Mozilla Firefox 3. 6.9 简体 版 中 调试 通过 )。 


1. canvas 基础 
创建 canvas 的 方法 很 简单 ,只 需要 在 HTML 页 面 中 添加 二 canvas 之 元 素 。 


<canvas id="myCanvas" width="300" height="150"> 
Fallback content, in case the browser does not support Canvas. 


</canvas> 
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为 了 能 在 JavaScript 中 引用 元 素 , 最 好 给 元 素 设 置 ID, 也 需要 给 canvas 设 定 高 度 和 
宽度 。 

创建 好 画布 以 后 就 要 准备 画笔 ,要 在 画布 中 绘制 图 形 需要 使 用 JavaScript。 首 先 通 
过 getElementById 函数 找到 canvas 元 素 , 然 后 初始 化 上 下 文 ,之 后 就 可 以 使 用 上 下 文 
API 来 绘制 各 种 图 形 ,下 面 的 脚本 用 来 在 canvas 中 绘制 一 个 矩形 。 


//Get a reference to the element. 
Var elem= document .getElementById('myCanvas'); 
//Always check for properties 和 methods, to make sure your code doesn't break 
//in other browsers. 
if (elem && elem.getContext) { 
//Get the 2d context. 
//Remember: you can only initialize one context per element. 
Var context=elem.getContext ('2d'); 
if (context){ 
//You are done! Now you can draw your first rectangle. 
//You only need to provide the (x,y) coordinates, followed by the width and 
//height dimensions. 
context .fillRect(0, 0, 150, 100); 
} 
} 


可 以 把 上 面 的 代码 放置 在 文档 的 head 部 分 ,或 者 放 在 外 部 文件 中 。 
2. 2D context API 的 一 些 例子 


介绍 了 如 何 创建 canvas 后 ,下 面 来 看 看 2D canvas API 的 一 些 简单 应 用 。 
【实例 12-1】 画 和 矩形 (12-1. html) 。 
(1) 在 Dreamweaver 中 创建 一 个 名 为 "12-1. html” 的 文件 ,在 “代码 ”视图 中 输入 如 下 


代码 : 


< !DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title> 画 矩形 < /title> 
<script type="text/javascript"><!--— 
window.addEventListener('load', function () { 
//Get the canvas element. 
Var elem=document .getElementById('myCanvas'); 
if (!elemll!elem.getContext) { 
return; 
} 
//Get the canvas 2d context. 


Var context=elem.getContext ('2d'); 
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if (!context) { 
return; 
} 
//Now you are done! Let's draw a blue rectangle. 
context .fillStyle= '#00f"'; 
context .fillRect (0, 0, 150, 100); 
}, false); 
--> 
</script> 
</head> 
<body> 
<center> 
<p> 
<canvas id="myCanvas" width="200" height="150">Fallback content, in case the 
browser does not support Canvas.</canvas> 
</p> 
</body> 
</html> 


(2) 在 Firefox 浏览 器 中 的 显示 效果 如 图 12-2 所 示 。 
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图 12-2 浏览 器 显示 效果 


【实例 12-2】 设置 颜色 , 画 和 矩形 (12-2. html) 。 

通过 fillStyle 和 strokeStyle 属性 可 以 轻松 设置 矩形 的 填充 颜色 和 线条 的 颜色 。 颜 
色 值 使 用 方法 和 CSS 一 样 : 十 六 进 制 数 .rgb() .rgba() 和 hsla() 。 

通过 fillRect 可 以 绘制 带 填 充 的 矩形 ,使 用 strokeRect 可 以 绘制 只 有 边框 没有 填充 
的 矩形 ,如果 想 清除 部 分 canvas 可 以 使 用 clearRect。 

上 述 三 个 方法 的 参数 相同 : x,y, width,height。 前 两 个 参数 设 定 (x,y) 坐 标 , 后 两 个 
参数 设置 矩形 的 宽度 和 高 度 。 

(1) 在 Dreamweaver 中 创建 一 个 名 为 “12-2. html” 的 文件 ,在 “代码 ”视图 中 输入 如 下 
代码 : 

< I!DOCTYPE HTML> 

<html> 
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<title> 设 置 颜色 , 画 矩 形 </title> 
<body> 
<center> 
<canvas id="myCanvas">your browser does not support the canvas tag </canvas> 
<script type="text/javascript"> 
var canvas=document .getElementById('myCanvas'); 
Var context=canvas .getContext ('2d'); 
context .fillSstyle="'#00f'; //blue 
Context .strokeStyle= '#f00'; //red 
Context .lineWidth= 4; 
//Draw some rectangles. 
context .fillRect (0,0,150,50); 
context.strokeRect (0,60,150, 50); 
context .clearRect (30,25,90,60); 
context .strokeRect (30,25, 90, 60); 
</script> 
</body> 
</html> 


(2) 在 Firefox 浏览 器 中 的 显示 效果 如 图 12-3 所 示 。 
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图 12-3 浏览 器 显示 效果 


【实例 12-3】 画 线 条 (12-3. html) 。 
(1) 在 Dreamweaver 中 创建 一 个 名 为 “12-3. html” 的 文件 ,在 “代码 ”视图 中 输入 如 下 
代码 : 


< !DOCTYPE HTML> 

<html> 

<title> 夯 线条 < /title> 

<body> 

<center> 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid 
#c3c3c3;">Your browser does not support the canvas element. </canvas> 

<script type="text/javascript"> 


Var c=document .getElementById ("myCanvas"); 
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Var cxt=c.getContext ("2d"); 
cxt.moveTo (10,10); 
cxt.lineTo (150,50); 
cxt.lineTo (10,50); 
cxt.stroke () 7 
</script> 
</body> 
</html> 


(2) 在 Firefox 浏览 器 中 的 显示 效果 如 图 12-4 所 示 。 
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图 12-4 浏览 器 显示 效果 


【实例 12-4】 夯 圆 (12-4. html) 。 


(1) 在 Dreamweaver 中 创建 一 个 名 为 "12-4. html” 的 文件 ,在 “代码 ”视图 中 输入 如 下 
代码 ; 


< !DOCTYPE HTML> 
<html> 
<title> 画 圆 </title> 
<body> 
<center> 
<canvas id="myCanvas" width="200" height="100" style="border:1lpx solid 
#c3c3c3;">Your browser does not support the canvas element. </canvas> 
<script type="text/javascript"> 
var c=document .getElementById ("myCanvas"); 
Var cxt=c.getContext ("2d"); 
cxt.fillStyle="#FF0000"; 
cxt .beginPath (); 
cxt.arc(100,45,30,0,Math.PI* 2,true); 
cxt.closePath (); 
[4 
</script> 
</body> 
</html> 


(2) 在 Firefox 浏览 器 中 的 显示 效果 如 图 12-5 所 示 。 
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图 12-5 浏览 器 显示 效果 


【实例 12-5】 形成 渐变 (12-5. html) 。 
(1) 在 Dreamweaver 中 创建 一 个 名 为 "12-5. html” 的 文件 ,在 “代码 ”视图 中 输入 如 下 
代码 : 


< !DOCTYPE HTML> 
<html><title> 形 成 渐变 < /title> 
<body> 
<center> 
<canvas id="myCanvas" width="200" height="100" style= "border:1px solid 
#c3c3c3;">Your browser does not support the canvas element. 
</canvas> 
<script type="text/javascript"> 
var c=document .getElementById ("myCanvas"); 
Var cxt=c.getContext ("2d"); 
var grd= cxt .createLinearGradient (0,0,175,50); 
grd.addColorStop (0,"#FF0000"); 
grd.addColorStop (1, "#00FF00"); 
cxt.fillstyle=grd; 
cxt.fillRect (0,0,175,50); 
</script> 
</body> 
</html> 


(2) 在 Firefox 浏览 器 中 的 显示 效果 如 图 12-6 所 示 。 
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12-6 浏览 器 显示 效果 
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【实例 12-6】 插入 图 像 (12-6. html) 。 
(1) 在 Dreamweaver 中 创建 一 个 名 为 "12-6. html” 的 文件 ,在 “代码 ”视图 中 输入 如 下 
代码 : 


< IDOCTYPE HTML> 
<html><title> 插 入 图 像 </title> 
<body> 
<center> 
<canvas id="myCanvas" width="200" height="100" style= "border:lpx solid 
#c3c3c3;">Your browser does not support the canvas element. </canvas> 
<script type="text/javascript"> 
Var c=document .getElementById ("myCanvas"); 
Var cxt=c.getContext ("2d"); 
var img=new Image () 
img.src="flower.jpg" 
cxt.drawImage (img,0,0); 
</script> 
</body> 
</html> 


(2) 在 Firefox 浏览 器 中 的 显示 效果 如 图 12-7 所 示 。 
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图 12-7 浏览 器 显示 效果 


12.4 本 章 小 结 


作为 一 种 通用 的 数据 交换 格式 ,XML 自从 出 现 以 来 ,一 直 受 到 业界 的 广泛 关注 ， 
XML 的 应 用 也 越 来 越 广泛 。 本 章 首先 介绍 了 XML 的 概念 ,起源 和 特点 ` XML 的 文档 结 
构 和 基本 语法 ,使 读者 对 XML 有 一 个 大 体 的 认识 ,并 对 XML 的 发 展 前 景 进行 了 展望 。 

其 次 ,本 章 简要 介绍 了 Web 2.0 及 AJAX 技术 。Web 2. 0 技术 是 Web 技术 发 展 的 
一 个 里 程 碑 , 是 相对 于 Web 1. 0(2003 年 以 前 的 互联 网 模式 ) 的 新 一 类 互联 网 应 用 的 统 
称 , 是 一 次 从 核心 内 容 到 外 部 应 用 的 革命 。AJAX 技术 是 Web 2. 0 中 的 重要 成 员 ,通过 
AJAX 技术 ,可 以 实现 以 无 刷新 的 方式 更 新 HTML 元 素 中 的 内 容 。 
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最 后 ,本 章 还 对 HTML 5 进行 了 介绍 ,并且 通过 实例 说 明了 HTML 5 的 简单 应 用 。 
虽然 HTML 5 还 处 于 探索 和 尝试 阶段 .但 大 家 对 HTML 5 的 喜爱 和 期 待 ,必定 会 使 
HTML 5 成 为 未 来 几 年 Web 应 用 的 研究 热门 。 


12.5 刁 题 


简 答 及 实 训 题 

1. 你 是 怎么 理解 HTML 标记 与 XML 标记 之 间 的 区 别 的 ? 
2. 根据 自己 的 理解 表述 AJAX 的 作用 及 优点 。 

3. 上 网 查询 有 关 HTML 5 的 最 新 技术 动态 。 
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